Angular获取选中的复选框

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()
{
}

但是这在Angular中是不可接受的......那么有没有适当的方法来做到这一点呢？

- Sana Joseph

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));
};

- Vinod Louis

---

真棒，但是当我勾选其中一个复选框时，会出现以下错误消息：错误：无法将未定义的内容转换为对象。 - Sana Joseph

我不明白你想说什么，你能详细说明一下在哪种情况下出现错误吗？我在选择复选框时没有看到任何错误。 - Vinod Louis

是的，在您的代码中它运行得很好，但当我在我的代码中添加了“ng-model = selected []”时，当我尝试选择其中一个复选框时，我收到了那个错误。 - Sana Joseph

我能看出来你可能忘记在控制器开头写 $scope.selected = {};。 - Vinod Louis

由于复选框中的准备工作ng-model="selected[RQuestion.Id]"，所以所选项显示为Id : state。至于选择第一个选项，你需要以稍微不同的方式进行操作，我在这里创建了一个plunker链接http://plnkr.co/edit/Fbth4FMpssCHcODRJEgx?p=preview，希望对你有所帮助！ - Vinod Louis

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列表示例也演示了这一点。

p.s. 顺便提一下，您还可以在指令前添加data-以使您的Angular指令符合HTML5标准。例如：data-ng-model="X.Item.Id"

- Tim B James

---

非常感谢，您能否提及检查方法？ - Sana Joseph

你需要发布你的模型代码，这样我才能看到数值。 - Tim B James

你的 yourModelItems 是如何填充的？ - Steve Smith

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);
 }

- Leo