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

首先，我建议您使用自定义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

您可以将alias设置为ng-repeat中的实际数组，并根据其长度显示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 -->

为了清楚地理解，这里是关于角度文档alias_expression的解释：

  表达式中的
变量为alias_expression - 您还可以提供   可选的别名表达式，然后存储中间件   应用滤波器后转发器的结果。通常   这用于在过滤器处于活动状态时呈现特殊消息   转发器，但过滤后的结果集为空。

For example: item in items | filter:x因为结果会存储   重复项目的片段作为结果，但仅在项目之后   已通过过滤器处理过。

如果ng-repeat使用ng-if返回null，则显示div

2 个答案: