Javascript 如何在angularjs中仅获取选定的复选框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12579986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get only selected checkboxes in angularjs?
提问by mikel
I have ng-repeated data, and am trying to get only the ones the user has selected. I'm not sure how to do it though, this is what I have:
我已经ng-repeat编辑了数据，并且正在尝试仅获取用户选择的数据。我不知道该怎么做，这就是我所拥有的：
HTML:
HTML：
<div data-ng-controller="MyCtrl">
<ul>
<li data-ng-repeat="record in records">
<input type="checkbox" ng-model="record.Id"> {{record.Id}}
</li>
</ul>
<a href="javascript:;" data-ng-click="ShowSelected()">Show Selected</a>
</div>
JS:
JS：
function MyCtrl($scope)
{
$scope.records = [ { "Id": 1 }, { "Id": 2 }, { "Id": 3 } ];
$scope.ShowSelected = function()
{
// how can I get only the selected records here ?
}
}
I did get it working one way - by adding a isSelected:falseproperty to each object and changing the ng-modelof the checkbox to record.isSelected, I can then filter on that in the ShowSelectedfunction. This seems inefficient though, I don't want to be adding extra properties to the model if can avoid it.
我确实让它以一种方式工作 - 通过向isSelected:false每个对象添加一个属性ng-model并将复选框的更改为record.isSelected，然后我可以在ShowSelected函数中对其进行过滤。但这似乎效率低下，如果可以避免的话，我不想向模型添加额外的属性。
Is there a better way ?
有没有更好的办法 ？
回答by Tosh
JavaScript
JavaScript
var app = angular.module('plunker', ['ui']);
app.controller('MyCtrl', function($scope) {
$scope.records = [ { "Id": 1 }, { "Id": 2 }, { "Id": 3 } ];
$scope.selected = {};
$scope.ShowSelected = function() {
$scope.records = $.grep($scope.records, function( record ) {
return $scope.selected[ record.Id ];
});
};
});
HTML
HTML
<div data-ng-controller="MyCtrl">
<ul>
<li data-ng-repeat="record in records">
<input type="checkbox" ng-model="selected[record.Id]"> {{record.Id}}
</li>
</ul>
<a href="javascript:;" data-ng-click="ShowSelected()">Show Selected</a>
</div>
You can store the flag in separately and use it to filter the data.
您可以单独存储标志并使用它来过滤数据。
updated plunk as some CDN links were broken.
由于某些 CDN 链接已损坏，因此更新了 plunk。
回答by Abel Pereira
I believe the best way would be to add property 'isSelected' to your record and bind to that value. Something like this:
我相信最好的方法是将属性“isSelected”添加到您的记录中并绑定到该值。像这样的东西：
<input type="checkbox" ng-model="record.isSelected">
another thing you can do (specially if you 'cannot' add that extra property to the record, would be to maintain an array of selected items and add/remove them from the selected array when the user makes the selection:
您可以做的另一件事（特别是如果您“不能”将该额外属性添加到记录中，则是维护一个选定项目的数组，并在用户进行选择时从选定的数组中添加/删除它们：
<input type="checkbox" ng-change="recordSelected(result)" ng-true-value="{{record.id}}" ng-false-value="{{-record.id}}" ng-model="result">
The recordSelected function will be handled in your controller to add/remove and record from the selected records list.
recordSelected 函数将在您的控制器中处理，以从所选记录列表中添加/删除和记录。
PS: I used a negative record id to represent the record was unselected.
PS：我用了一个否定的记录id来表示记录没有被选中。
