Javascript 如果使用ng重复，如何使用ng？

我有一个简单的导航对象设置，列出导航项目（以及它们是否应该出现在主导航中）。似乎当我尝试将ng if与ng repeat混合使用时，事情会土崩瓦解，但当我将ng show与ng repeat混合使用时，效果很好（但我最终得到了一堆我不想附加到DOM中的隐藏元素）

routes对象看起来像

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

在尝试使用

ng if

时，我收到以下错误：

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

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

---

我猜这是想告诉我，我不能两次声明它的存在声明。我可以在一个内部元素上使用

ng if

，但我想最终还是会得到一堆空的

a

标记

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

我尝试的第一件事是将

ng if

和

ng repeat

组合成一个自定义指令。我很快会把它推到github上，但这太麻烦了

更简单的方法是修改

route.routes

集合（或创建占位符集合）

在你看来

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

。。。
如果
ng repeat
您应该使用过滤器（）从列表中排除某些项目，而不是
ng if
 您应该在
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>



警告：我还没有实际测试过这段代码。
可能有更好的解决方案，但在阅读了上面的回复后，您可以尝试创建自己的自定义过滤器：

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：
这个班轮如何使用：

筛选器不适用于对象。虽然我不知道过滤器的事，但它似乎会起作用。每当我搜索过滤器时，我只是想，每当它说
filter
时，它通常指的是角度过滤器，而不是实际的阵列过滤器。是的，我只是以这种方式进行了试验，它正在调试。感谢@Skimberks answer中提到的想法，过滤器不支持没有额外插件的对象。为什么要将输入复制到inputArray中？如果直接对输入数组进行过滤，似乎效果不错。
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>

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