フィルタリングした後に繰り返す兄弟の中に要素がない場合は、角を隠す

私はそのような構造を持っています。フィルタリングされた後に内部の繰り返しdivの中に要素がない場合は除算器を非表示にしたい.LENGTH === 0が、フィルタリング後）フィルタリングした後に繰り返す兄弟の中に要素がない場合は、角を隠す

<div ng-repeat="theme in myObj"> 
    <div class="item item-divide" ng-show="showDivider">{{theme.name}}</div> 
    <div ng-repeat="item in theme.items | myCustomFilter: searchQuery: this"> 
     <!--code for displaying each item--> 
    </div> 
<div>

私はmyCustomFilterに現在のスコープを渡し、そこからshowDividerプロパティを変更しようとしたが、それは要素を隠したら、SEARCHQUERYが変更された場合、それを正しく表示するためにはないだろう。

出典

2016-07-13 Pavel Fanko

あなたは、CSSとngのクラスのソリューションを考えましたか？ – Denis

をカスタムフィルタを使用してこれを達成することができます。

以下のスニペットを確認すると、検索が完了すると、filterは空の配列を返します。レスポンスの長さをチェックすることで、ディバイダ要素を表示/非表示にすることができます。

var app =angular.module('app', []); 
 
    app.controller('MainCtrl', function($scope) { 
 

 
    $scope.search= ''; 
 

 
    var myObj = [ 
 
       { 
 
        "name": "theme1", 
 
        "items": [{"name":"red"}] 
 
       } 
 
      ] 
 

 
    $scope.myObj = myObj; 
 

 
}).filter('propFilter', function() { 
 
return function(prop, searchTerm) { 
 
    
 
    var filteredProps = []; 
 
    
 
    if(searchTerm === "") 
 
    { 
 
    return prop; 
 
    } 
 
    else 
 
    { 
 
    return filteredProps; 
 
    } 
 
} 
 
    })

<html ng-app="app"> 
 
    <head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script> 
 
</head> 
 
<body ng-controller="MainCtrl"> 
 
    
 
<div class="input-group"> 
 
     <label>Search </label> 
 
     <input type="text" class="form-control" ng-model="search" search-box="" /> 
 
    </div> 
 
    <div ng-repeat="theme in myObj"> 
 
    <div class="item item-divide" ng-show="filteredProps.length > 0">{{theme.name}}</div> 
 
    <div ng-repeat="item in theme.items | propFilter: search as filteredProps"> 
 
    {{item.name}} 
 
    </div> 
 
    <div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

出典

2016-07-13 16:55:03 Deep

フィルタリングされた配列の長さが既に表示されている場合 – charlietfl

1つの方法は、テンプレート内の変数にフィルタリングされた結果を割り当てるには、次のようになります。

<div ng-repeat="item in (filteredItems = (theme.items | myCustomFilter: searchQuery: this))">

をし、その後、あなたは長さや使用を印刷する（スコープにバインド経由である）その変数を使用することができます他の目的のためならば：

<div> count: {{ filteredItems.length }} </div>

あなたは詳細については、この答えをチェックアウトすることができます：AngularJS - how to get an ngRepeat filtered result reference

出典

2016-07-13 16:52:53

'as alias'が' ng-repeat'で導入されたので、 'filteredItems ='をそれ以上使用する必要はありません。同じことを成し遂げる。いずれにしても、カスタムフィルタを作成するよりも簡単です – charlietfl

フィルタリングした後に繰り返す兄弟の中に要素がない場合は、角を隠す

答えて

関連する問題