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是两个AngularJS myApp.filters(...)。

摘要：目标是确保ng-repeat 忽略具有某些特定键或数据的元素（不打印空HTML行）。

Answer 1

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

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

现在，如果所有这些都是真的，你就会返回true，这就是你真正想要的。

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时仅过滤一个或多个元素

2 个答案: