如何在ng-repeat中使用ng-model和ng-checked一起用于单选按钮

时间:2015-06-29 13:42:38

标签: angularjs angularjs-ng-repeat angularjs-ng-model angularjs-ng-checked

我正在尝试从网址获取角色数据(JSON)并使用ng-repeat将其分配给单选按钮(显示角色列表)并将其显示在MODAL中。必须为当前分配给用户的角色选择任何一个选项。

当用户更改选择并单击“确定”时,应将选定的值分配给对象,该对象将进一步传递给URL以更新用户的角色。

如果我使用,

<div ng-repeat="item in roleDataList">
        <input type="radio"  ng-model="item"  ng-checked="item.RoleId==assignedRoleId?true:null" name="RoleRadioButton" ng-value="item"  />                   
        <span>{{item.RoleName}}</span>
</div>

然后它将已经分配的数据显示为默认值,但我无法访问所选数据

如果我使用,

<div ng-repeat="item in roleDataList">
        <input type="radio"  ng-model="$parent.parentRoleId"  ng-checked="item.RoleId==assignedRoleId?true:null" name="RoleRadioButton" ng-value="item"  />                   
       <span>{{item.RoleName}}</span>
</div>

然后在$parent.parentRoleId中可以使用所选角色,但未选择默认值。

可以实现两者的任何帮助吗?

1 个答案:

答案 0 :(得分:0)

看看这个小提琴几乎是你想要的东西

Fiddle

<div ng-controller="Ctrl">
<span ng-repeat="category in categories">
  <label class="checkbox" for="{{category.id}}">
    <input type="checkbox" ng-model="selection.ids[category.id]" name="group" id="{{category.id}}" />
    {{category.name}}
  </label>
</span>
<pre ng-bind="selection.ids | json"></pre>    

function Ctrl($scope) {

$scope.selection = {
    ids: {"50d5ad": true}
};

$scope.categories = [ { "name": "Sport", "id": "50d5ad" } , {"name": "General", "id": "678ffr" } ];

}