javascript - Angular 获取选定的复选框

Question

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

 <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指令直接将属性绑定到元素。

例如

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

这将更新您的模型。

从此您将能够检查模型中的值并查看已检查的值。

例如

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

查看ngModel的文档。angularjs.org主页上的 ToDo 列表示例也演示了这一点。

ps 附带说明一下，您还可以通过添加data-before 来使您的角度指令 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);
 }