2017-01-04 4 views
0

フィルタリングされたリストに要素が表示されていない場合にアラートを表示しようとしています。私はこれらのリストが本当に長くなるので、良いパフォーマンスのソリューションを探しています。AngularJSフィルタリングと制限リストの長さが同じかどうかを確認する方法

<div class="list_item" ng-repeat="item in $ctrl.list | filter: $ctrl.responsiveFilter | limitTo: 6 as results track by $index"> 
    <label ng-click="$ctrl.handle_list_click()"> 
     <input type="checkbox" ng-model="item.checked"> 
     <div class="fake_label" > 
      {{item.name}} 
     </div> 
    </label> 
</div> 
<div class="list_item too_many" 
    ng-repeat-end 
    ng-if="results.length > 6"> 
    <div class="fake_label"> 
     {{results.length}} matches... Please, filter out. 
    </div> 
</div> 

しかし、結果は濾過しても制限された後の要素が含まれています。ここ

は、私が今から持っているものです。私がas resultslimitToの直前に移動すると、ただ破損します。 限られたリストの長さと、フィルタリングされたリストの長さが異なる場合は、警告を示しています。私は検出したい

条件は、アラートが表示さだろう。

as resultsの代わりに他のものを使用しても構いませんが、その状態を検出する方法があるかどうか疑問です。

編集:問題は、今私が必要とする量だけのフィルタの後ですが、限界の前にしながら、results.lengthは、制限を適用した後に私の元素の量を与えることです。私はlimitTo文を削除することによってこれを行う方法を知っているが、そのリストにあまりにも多くの結果がある...

+0

これは非常に簡単な比較結果です。結果は.length-limit> 0です。さらに、 'ng-if =" results.length-limit "'です。ただハードコードの代わりにスコープ変数を使用してください – charlietfl

+0

私はこの場合、変更を監視し、フィルタリングされたリストを自分で構築することをお勧めします。 - 例えば$ scopeCollection( 'list'、rf => filteredList = ...) –

+0

'$ ctrl.list.length> results.length'のようなものはありますか? –

答えて

0

最も簡単な方法は、繰り返しを複製し、ろ過要素をカウントするためにそれを使用することであるのに役立ちます願っています。最初は、これはかなり遅いと思っていましたが、実際にはDOM操作があまりないため、おそらく実行速度は非常に驚いています。

<div class="list_item" ng-if="false" ng-repeat="item in $ctrl.list | filter: $ctrl.responsiveFilter as count track by $index"> 
</div> 

<div class="list_item" ng-repeat="item in $ctrl.list | filter: $ctrl.responsiveFilter | limitTo: 6 as results track by $index"> 
    <label ng-click="$ctrl.handle_list_click()"> 
     <input type="checkbox" ng-model="item.checked"> 
     <div class="fake_label" > 
      {{item.name}} 
     </div> 
    </label> 
</div> 
<div class="list_item too_many" 
    ng-repeat-end 
    ng-if="count.length > results.length"> 
    <div class="fake_label"> 
     {{count.length}} matches... Please, filter out. 
    </div> 
</div> 

こう

あなたが数えると限定されたリストをペイントするフィルタ要素をカウントする ng-if隠されたループと別のものを持っています。これらのデータを使用して条件を作成するだけです。

0

var newapp = angular.module('someapp',[]); 
 
newapp.service('limitcheck', [function(){ 
 
\t return { 
 
    \t checkLimit : function (arr) { 
 
    \t if (arr.length > 6) { 
 
     \t alert('The array has more than 6 entries'); 
 
     } 
 
    } 
 
    }; 
 
}]); 
 
newapp.filter('dummyfilter',['limitcheck',function(limitcheck){ 
 
\t return function (input) { 
 
    \t //do your filtering here 
 
    limitcheck.checkLimit(input); 
 
    return input; 
 
    } 
 
}]); 
 
newapp.controller('something', ['$scope',function(scope){ 
 
    //This will trigger alert since it contains more than 6 entries 
 
    scope.alist = ['me','you','someone','anyone', 'noone','everyone','villain']; 
 
    //this will not 
 
    //scope.alist = ['me','you','someone','anyone', 'noone','everyone']; 
 
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app='someapp'> 
 
    <div ng-controller='something'> 
 
    <div ng-repeat='person in alist | dummyfilter | limitTo :6'> 
 
     {{person}} 
 
    </div> 
 
    </div> 
 
</div>

は、私が試してみましたし、サービスを利用して、結果を達成し、フィルタの組み合わせ

は、私は、これは

関連する問題