1

最大数に達したら残りのレコードを無効にすることで、リストで選択できるレコードの数を合計レコードのサブセットに制限したいと考えています。リストの長さは数千のレコードになる可能性があるため、パフォーマンスが問題になります。現在のソリューション (以下/フィドル) がスケーリングされないのではないかと心配しています。パフォーマンス上の理由から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;
    };
  });
4

1 に答える 1

3

ここに 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);
        };
    });
于 2013-06-25T19:27:48.837 に答える