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

Question

我只打印数组中将使用 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是两个AngularJSmyApp.filters(...).

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

Answer 1

您 ng-if 中的逻辑有缺陷。如果任何条件为真，您将返回真，因此您在每次迭代中都为真。您需要逻辑 and 运算符，而不是 or.

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

现在，如果所有这些都为真，您将返回真，这正是您真正想要的。

Answer 2

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

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

Filter only one or more elements while using ng-repeat

javascript

angularjs

ng-repeat