ng-repeatでng-repeatがnullを返す場合にdivを表示

Question

ng-repeatがnullを返すときに、その中にメッセージを含むdivを表示したいとします。私のng-repeatには、jsonを簡単にフィルタリングするためのng-ifが付いています。

はここに私のHTMLすべての

<ion-list> 
     <ion-item class="item-remove-animate" ng-repeat="uit in useritems" 
     ng-if="uit.catid == categoryI" type="item-text-wrap" > 
     <h2>{{uit.user}}</h2> 
     <p>{{uit.pass}}</p> 
     <ion-option-button class="button-assertive" ng-click="remove(uit.uniqueid)"> 
      Delete 
     </ion-option-button> 
     </ion-item> 
    </ion-list> 

    <!-- DIV to show message --> 
    <div class="someclass"> 
     SOME MSG 
    </div> 
    <!-- DIV to show message --> 

Answer 1

まずあり、私はあなたがカスタムdirectiveを使用することをお勧めします。

<ion-item class="item-remove-animate" ng-repeat="uit in useritemsFiltered = (useritems | filter:customFilter)" type="item-text-wrap" > 
    <h2>{{uit.user}}</h2> 
    <p>{{uit.pass}}</p> 
    <ion-option-button class="button-assertive" ng-click="remove(uit.uniqueid)"> 
     Delete 
    </ion-option-button> 
</ion-item> 

あなたのディレクティブは次のようになります。

var someApp=angular.module('someApp', []); 
someApp.filter('customFilter', function() { 
     return function(input, uppercase) { 
     var out = []; 
     for (var i = 0; i < input.length; i++) { 
      if(input[i].catid == categoryI){ 
       out.push(input[i]); 
      } 
     } 
     return out; 
     } 
}); 

<div class="someclass" ng-show="!useritemsFiltered.length"> 
    SOME MSG 
</div> 

Answer 2

をあなたはNGリピートの実際の配列にaliasを設定すると、以下に示すように、その長さに基づいてdiv要素を表示することができます：

<ion-list> 
    <ion-item class="item-remove-animate" ng-repeat="uit in useritems as filtered" 
    </ion-item> 
</ion-list> 

filtered配列には実際のuseritemsに基づいて項目がフィルタリングされているだけなので、長さがゼロのときはdivと表示できます。

<!-- DIV to show message --> 
<div class="someclass" ng-show="!filtered.length"> 
    SOME MSG 
</div> 
<!-- DIV to show message --> 

ただ、明確な理解のために、ここで角度documentaionからalias_expressionについての説明は次のとおりです。alias_expressionとして表現で

変数 - あなたはまた、中間を格納します オプションのエイリアスの式を提供することができます フィルターを適用した後のリピーターの結果。通常、 これは、リピータのフィルタが でアクティブになっているが、フィルタ処理された結果セットが空の場合に特別なメッセージを表示するために使用されます。

For example: item in items | filter:x結果として、結果として反復項目の フラグメントが格納されますが、項目 がフィルタで処理された後にのみ、結果が返されます。