angularjs - 使用 ng-repeat 中的函数将复选框选择限制为子集

Question

我想通过在达到最大值后禁用剩余记录来将列表中可能选择的记录数限制为总记录的子集。该列表的长度可能是 1000 条记录，因此性能是一个问题。我担心我目前的解决方案（下面/小提琴）不会扩展。出于性能原因，我已经阅读了几篇警告不要在ng-repeat中使用函数（在本例中为maxSelected() ）的文章，但不确定没有它们我该如何完成？任何建议将不胜感激！

这是小提琴...... http://jsfiddle.net/ALPEP/

HTML：

<div ng-controller="recordsCollectionController">
  <table>
    <tbody>
      <tr
        ng-repeat="record in records"
        ng-class="{info:selected[record.id], warning:!selected[record.id] && maxSelected()}">
        <td>
          <input
            type="checkbox"
            ng-model="selected[record.id]"
            ng-disabled="!selected[record.id] && maxSelected()"
            id="{{record.id}}"/>
        </td>
        <td>
          <label for="{{record.id}}">{{record.name}}</label>
        </td>
      </tr>
    </tbody>
  </table>
</div>

JS：

angular
  .module('App',[])
  .controller('recordsCollectionController',function($scope){
    $scope.selected = {"1":true,"2":true,"3":true};
    $scope.records = [
      {"id":1,"name":"Homer"},
      {"id":2,"name":"Marge"},
      {"id":3,"name":"Bart"},
      {"id":4,"name":"Lisa"},
      {"id":5,"name":"Maggie"}
    ];
    $scope.maxSelected = function(){
      var count = 0;
      for(x in $scope.selected){
        if($scope.selected[x]) count++;
      }
      return (count===3) ? true : false;
    };
  });

Answer 1

这是一种选择。您的原始代码对每个 $digest 进行 2*N^2 次比较。每次选择更改都会进行 N 次比较。基本的变化是跟踪选定的计数并通过 ng-change 更新它，而不是每次需要时都重新计数。

<div ng-controller="recordsCollectionController">
    <pre>selected = {{selected}}</pre>
    <table class="table table-bordered table-striped">
        <colgroup>
            <col style="width:20px"/>
            <col/>
        </colgroup>
        <tbody>
            <tr
                ng-repeat="record in records"
                ng-class="{info:selected[record.id], warning:!selected[record.id] && selMax}">
                <td>
                    <input
                        type="checkbox"
                        ng-model="selected[record.id]"
                        ng-disabled="!selected[record.id] && selMax"
                        ng-change="updateSelected()"
                        id="{{record.id}}"/>
                </td>
                <td>
                    <label for="{{record.id}}">
                        {{record.name}}
                    </label>
                </td>
            </tr>
        </tbody>
    </table>
</div>

angular
    .module('App',[])
    .controller('recordsCollectionController',function($scope){
        $scope.selected = {"1":true,"2":true,"3":true};
        $scope.selMax = true;
        $scope.records = [
            {"id":1,"name":"Homer"},
            {"id":2,"name":"Marge"},
            {"id":3,"name":"Bart"},
            {"id":4,"name":"Lisa"},
            {"id":5,"name":"Maggie"}
        ];

        $scope.updateSelected = function(){
            console.log("Ping!");
            var count = 0;
            for(x in $scope.selected){
                if($scope.selected[x]) count++;
            }
            $scope.selMax = (count >= 3);
        };
    });