Question

我有一个使用angular的动态填充复选框列表。

 <div ng-repeat="X in XList">
     <label>{{X.Header}}</label>
     <input type="checkbox" name="X" value="{{X.Item.Id}}" />
     <p>{{X.Header}}</p>
 </div>

我想要一种方法来检索所有选中复选框的列表。通常我会用

 $('input[name=checkboxlist]:checked').each(function()
{
}

但这是不可接受的角度....所以有适当的方法这样做吗？

Answer 1

这是实施的plunker

 <input type="checkbox" ng-model="selected[record.Id]"> {{record.Id}}

 $scope.ShowSelected = function() {
  console.log($scope.selected);
  alert(JSON.stringify($scope.selected));
};

Answer 2

您可以使用ng-model指令直接将属性绑定到元素。

e.g。

<input type="checkbox" ng-model="X.Item.Id" />

这将更新您的模型。

通过这种方式，您只需检查模型中的值，并查看已检查的值。

e.g。

angular.forEach($scope.yourModelItems, function(item){
    // item.value ? 0 : 1;
});

查看ngModel的文档。此外，angularjs.org主页上的待办事项列表示例也证明了这一点。

P.S。另外，您还可以通过之前添加data-来使角度指令html5友好。例如data-ng-model="X.Item.Id"

Answer 3

<tr ng-repeat="x in numbers" >
<td><input type="checkbox"  ng-model="selected[x.id]"></td>`<tr ng-repeat="x in numbers" >

然后按钮进行操作

 <button ng-click="get_all_cheked()">Get checked</button>

然后在控制器中

 $scope.selected = {};
 $scope.get_all_cheked=function () {
 console.log("click");
 console.log($scope.selected);
 }

Angular获取选中的CheckBoxes

3 个答案: