Angularjs 使用ng repeat中的函数将复选框选择限制为带/不带的子集

我想通过在达到最大值后禁用剩余记录，将列表中可选择的记录数限制为总记录的一个子集。该列表的长度可能为1000条记录，因此性能是一个问题。我担心我当前的解决方案（低于/）无法扩展。我读过几篇文章，出于性能原因，警告不要在ng repeat中使用函数（maxSelected（）），但我不确定如果没有它们，我怎么能做到这一点？如有任何建议，将不胜感激

这是小提琴

HTML:

{{record.name}

JS:

angular
.module（'应用程序'，[]）
.controller（'recordsCollectionController'，函数（$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=函数（）{
var计数=0；
用于（x在$scope.selected中）{
如果（$scope.selected[x]）计数++；
}
返回（计数==3）？真：假；
};
});

这里有一个选项。您的原始代码每$digest有2*N^2个比较。每次选择更改都有N个比较。基本更改是跟踪所选计数并通过ng更改进行更新，而不是在每次需要时再次计数

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

选定={{selected}}
{{record.name}
有棱角的
.module（'应用程序'，[]）
.controller（'recordsCollectionController'，函数（$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=函数（）{
console.log（“Ping！”）；
var计数=0；
用于（x在$scope.selected中）{
如果（$scope.selected[x]）计数++；
}
$scope.selMax=（计数>=3）；
};
});

实际上，我不认为迭代和计数有什么意义，当你本可以完成

$scope.selMax++

并将

计数>=3

放在你的

ng disabled

中时，我考虑过完全跳过迭代，在选择更改时增加或减少计数，但如果两者不同步，它可能会感到脆弱。当然，当记录列表发生变化时，选择模型会发生什么这一更大的问题使它相形见绌。