如何只获得angularjs中的选中复选框？

Question

我有ng-repeat个ed数据，我试图只获取用户选择的数据。我不知道怎么做，这就是我所拥有的：

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：

function MyCtrl($scope) 
{
    $scope.records = [ { "Id": 1 }, { "Id": 2 }, { "Id": 3 } ];
    $scope.ShowSelected = function() 
    {
        // how can I get only the selected records here ?
    }
}

我确实以一种方式工作 - 通过向每个对象添加isSelected:false属性并将复选框的ng-model更改为record.isSelected，然后我可以在ShowSelected中对其进行过滤{1}}功能。这似乎效率低下，我不想在模型中添加额外的属性，如果可以避免的话。

有更好的方法吗？

Answer 1

的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

<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>

http://plnkr.co/edit/lqtDQ6

您可以单独存储该标志，并使用它来过滤数据。

因为一些CDN链接被破坏而更新了plunk。

Answer 2

我认为最好的方法是添加属性＆＃39; isSelected＆＃39;记录并绑定到该值。像这样：

<input type="checkbox" ng-model="record.isSelected">

你可以做的另一件事（特别是如果你不能将额外的属性添加到记录中，那就是维护一个选定项目的数组，并在用户制作时从所选数组中添加/删除它们选择：

<input type="checkbox" ng-change="recordSelected(result)" ng-true-value="{{record.id}}" ng-false-value="{{-record.id}}" ng-model="result">

将在您的控制器中处理recordSelected函数，以便从所选记录列表中添加/删除和记录。

PS：我使用了负记录ID来表示记录未被选中。