名称属性的AngularJS单选按钮组未正确初始化

时间:2018-11-19 17:15:53

标签: angularjs angularjs-ng-repeat radio-group

如果我们为该组指定ng-repeat属性,则单选按钮组似乎不会在name块内初始化属性。似乎适用于最后一组广播组,但不适用于其余广播组。另外,如果我删除name属性,它也可以正常工作。根据[AngularJS文档] [1],如果我们将namengModel一起使用,则不需要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}}

1 个答案:

答案 0 :(得分:1)

除了将name属性设置为输入的位置之外,您的代码看起来还不错。

仅当将模板中的

$index放在大括号中时,才会对其进行评估。 EX:{{$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>