34

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

4

5 回答 5

19

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

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

于 2013-10-07T23:52:49.407 回答
5

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

于 2013-10-07T21:56:20.547 回答
2

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

我尝试的第一件事是将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"
...

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

于 2013-10-07T21:55:22.740 回答
1

这个使用$filter的单线器怎么样：

$scope.filteredRoutes = $filter('filter')($scope.route.routes, function(route){
  return route.nav;
});
于 2016-09-22T13:04:28.617 回答
0

您应该在您的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>

警告：我还没有实际测试过这段代码。

于 2013-10-07T22:02:34.060 回答