我有一个简单的导航对象设置,其中列出了导航项(以及它们是否应出现在主导航中)。看来,当我尝试将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
标签。
可能有更好的解决方案,但是在阅读了以上答复之后,您可以尝试制作自己的自定义过滤器:
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
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句