Группы радиокнопок AngularJS с атрибутом name не инициализируются должным образом - PullRequest
Новая
       13

Группы радиокнопок AngularJS с атрибутом name не инициализируются должным образом

0 голосов
/ 19 ноября 2018

Группа переключателей, кажется, не инициализирует свойство внутри блока ng-repeat, если мы указываем атрибут name для группы.Кажется, работает для последнего набора радиогрупп, но не для остальных.Кроме того, он работает нормально, если я удалю атрибут name.Согласно [документации AngularJS] [1], атрибут name не требуется, если мы используем его с ngModel.Но это не говорит, что мы не должны использовать это.И мне нужно указать атрибут name.

Пожалуйста, обратитесь к примеру ниже: 

var m = angular.module("MyApp", []);

m.controller("MyController", ["$scope", function($scope) {
  
  $scope.myArr = [{
    name: "Obj 1",
    status: "a"
  }, {
    name: "Obj 2",
    status: "b"
  }, {
    name: "Obj 3",
    status: "c"
  }];
}]);
body {
  background-color: #1D1F20;
}
 
.row {
  margin-bottom: 15px;
}

.demo {
  background: green;
  color: white;
  padding: 10px;
  border-radius: 3px;
  min-width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController" class="demo">
    <div ng-repeat="eachItem in myArr" class="row">
        
        <span>{{eachItem.name}} => </span>
        
        <label> a
          <input name="status-$index" type="radio" ng-model="eachItem.status" value="a">
        </label>
        
        <label> b
          <input name="status-$index" type="radio" ng-model="eachItem.status" value="b">
        </label>
        
        <label> c
          <input name="status-$index" type="radio" ng-model="eachItem.status" value="c">
        </label>
        
    </div>
</div>

1 Ответ

0 голосов
/ 21 ноября 2018

Ваш код выглядит хорошо, за исключением места, где вы устанавливаете атрибут name для ввода.

$index в шаблоне будет оцениваться только в том случае, если вы заключите его в фигурные скобки.Пример: {{$index}} иначе вы получите $ index в имени.Вы должны использовать: 

 <div ng-repeat="eachItem in myArr track by $index" class="row">
   <input name="status-{{$index}}" type="radio" ng-model="eachItem.status" value="a">...
 </div>
...