如何将 ng-if 与 ng-repeat 一起使用？

IT技术 javascript angularjs
2021-02-21 07:52:44

我有一个简单的导航对象设置，它列出了导航项目（以及它们是否应该出现在主导航中）。似乎当我尝试将 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是 now 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标签。

5个回答

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

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

为什么要将输入复制到 inputArray 中？如果您只是直接过滤输入数组，它似乎工作正常。
2021-04-23 07:52:44

而不是ng-if您应该使用过滤器（http://docs.angularjs.org/api/ng.filter:filter）ng-repeat从您的列表中排除某些项目。

正如@Skimberks 回答中提到的，过滤器不支持没有附加插件的对象
2021-05-10 07:52:44

我也遇到了这个问题，并找到了几种解决方法。

我尝试的第一件事是将ng-if和组合ng-repeat成一个自定义指令。我很快就会把它推送到 github，但它很笨拙。

更简单的方法是修改您的route.routes集合（或创建一个占位符集合）

$scope.filteredRoutes = {};
angular.forEach($scope.route.routes, function(item, key) {
    if (item.nav) { $scope.filteredRoutes[key] = item; }
};

在你看来

...
<a  ng-repeat="(key, item) in filteredRoutes"
...

如果您需要动态更新，只需设置手表等。

这个单行如何使用$filter：

$scope.filteredRoutes = $filter('filter')($scope.route.routes, function(route){
  return route.nav;
});

您应该在您ng-repeat的中使用过滤器而不是使用ng-if.

这应该有效：

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

警告：我还没有真正测试过这段代码。

不幸的是，过滤器不适用于对象。这个module似乎可以工作。
2021-04-29 07:52:44
虽然我不知道过滤器过滤器。每当我搜索过滤器时，我只是想，每当它说它filter通常意味着角度过滤器，而不是实际的数组过滤器。
2021-05-02 07:52:44
是的 - 我只是在尝试这种方式，但它出了问题。不过谢谢
2021-05-19 07:52:44
其它你可能感兴趣的问题
上一篇JSON 使用 getter/setter 字符串化 ES6 类属性 下一篇捕获事件 onclose 浏览器