javascript - 如果 ng-repeat 和 ng-if 返回 null，则显示 div

Question

当 ng-repeat 返回 null 时，我想显示一个包含一些消息的 div。我的 ng-repeat 附带了一个 ng-if，用于简单过滤 json。

这是我的 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

首先，我建议您使用自定义指令。

<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>