如何在ng-repeat中使用ng-if？TL; DR; 使用自定义过滤器

一尘不染

如何在ng-repeat中使用ng-if？TL; DR; 使用自定义过滤器

angularjs

我有一个简单的导航对象设置，其中列出了导航项（以及它们是否应出现在主导航中）。看来，当我尝试将ng-if与ng-
repeat混合使用时，情况会分崩离析，但是当我将ng-show与ng-
repeat混合使用时，它可以正常工作（但是最后我得到了一堆隐藏的元素，但我没有想要附加到DOM）。

   <section class="nav">
        <a  ng-repeat="(key, item) in route.routes"
            ng-href="{{key}}"
            ng-show="item.nav"
        >
                {{item.label}}
        </a>
    </section>

但是以下操作无效（请注意，ng-show现在是ng-if）：

    <section class="nav">
    <a  ng-repeat="(key, item) in route.routes"
        ng-href="{{key}}"
        ng-if="item.nav"
    >
            {{item.label}}
    </a>
</section>

路线对象看起来像

routes: {
    '/home': { label: 'Home', nav: true },
    '/contact': { label: 'Contact', nav: false},
   // etc
}

尝试使用时收到以下错误ng-if：

错误：多个指令[ngIf，ngRepeat]要求在以下位置进行包含：

我想这是想告诉我，我不能声明它是两次存在的声明。我可以ng-if在一个内部元素上使用，但是我想我最终还是会得到一堆空的外部a标签。

阅读 166

2020-07-04

共1个答案

一尘不染

可能有更好的解决方案，但是在阅读了以上答复之后，您可以尝试制作自己的自定义过滤器：

angular.module('yourModule').filter('filterNavItems', function() {
  return function(input) {
    var inputArray = [];

    for(var item in input) {
      inputArray.push(input[item]);
    }

    return inputArray.filter(function(v) { return v.nav; });
  };
});

然后使用它：

<section class="nav">
    <a  ng-repeat="(key, item) in routes | filterNavItems"
        ng-href="{{key}}">
            {{item.label}}
    </a>
</section>

这是Plunker：http：//plnkr.co/edit/srMbxK？p
= preview

2020-07-04