使用ng-repeat时只过滤一个或多个元素

Filter only one or more elements while using ng-repeat

本文关键字：一个 元素 ng-repeat 过滤 使用      更新时间：2023-09-26

我希望只打印将使用ng-repeat打印的数组中的部分元素，而不是所有元素。

数组存储在$scope.userRecipes = []中。

在HTML中我使用:

<li ng-repeat="f in  userRecipes" class="list-group-item">
...
<div class="row panel-body" ng-show="!f.isCollapsed">
<hr>
<div class="col-md-6">
   <h3>{{f.trigger.triggerType | capitalize}} trigger</h3>
      <div ng-repeat="(key, data) in f.trigger" ng-if="!(key == 'triggerType')
         || !(key == 'lastCheck')
         || !(key == 'sender')
         || !(key == 'gaid')
         || !(key == 'ctid')
         ">
      <h4>{{key | reformat | capitalize}}:</h4> {{data}}
      </div>
</div>
<div class="col-md-6">
   <h3>{{f.action.actionType | capitalize}} action</h3>
      <div ng-repeat="(key, data) in f.action" ng-if="key.toString().localeCompare('actionType') || data.notNull() || !data">
      <h4>{{key | reformat | capitalize}}:</h4> {{data}}
   </div>
</div>
</div>
...
</li>

但是这个解决方案(ng-if="!(key == 'triggerType') || !(key == 'lastCheck') || ...")不适合我。它只工作，如果我设置一个条件:ng-if="!(key == 'triggerType')"工作，如果单独离开。如果我使用ng-if="!(key == 'triggerType') || !(key == 'lastCheck')，它不工作。

注意reformat和capitalize是两个AngularJS的myApp.filters(...)。

总结:目标是确保ng-repeat 忽略那些具有特定键或数据的元素(不打印空HTML行)。

您的ng-if中的逻辑是有缺陷的。如果任何一个条件为真，你都会返回真，所以每次迭代都会得到真。您需要的是逻辑操作符and，而不是or。

<div ng-repeat="(key, data) in f.trigger" ng-if="!(key == 'triggerType')
         && !(key == 'lastCheck')
         && !(key == 'sender')
         && !(key == 'gaid')
         && !(key == 'ctid')
         ">

现在，如果它们都为真，你将返回真，这是你真正想要的。

HTML:

<div ng-repeat="(key, data) in filteredTriggers(f.trigger)">
    <h4>{{key | reformat | capitalize}}:</h4> {{data}}
</div>

控制器:

$scope.filteredTriggers = function(triggers) {
    var result = {};
    angular.forEach(triggers, function(value, key) {
        if (['triggerType', 'lastCheck', 'sender', 'gaid', 'ctid'].indexOf(key) == -1) {
            result[key] = value;
        }
    });
    return result;
}

相关文章：