Question

我有一个简单的导航对象设置，列出了导航项（以及它们是否应该出现在主导航中）。事实上，当我尝试将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对象看起来像

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

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

错误：多个指令[ngIf，ngRepeat]要求进行翻译：

我想它试图告诉我，我不能说明现有两次的声明。我可以在内部元素上使用ng-if，但我想我仍然会得到一堆空的a标记。

Answer 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

Answer 2

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

Answer 3

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

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

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

Answer 4

使用$filter：

这个单线程怎么样？

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

Answer 5

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

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

如何使用ng-if和ng-repeat？

5 个答案: