如果嵌套的ng-repeat不是空的,我怎样才能显示一个元素?

我有一个列表,用嵌套的ng重复创build。 每个外部ng-repeat都包含一个带有内部列表标签的div(例如:“Group A”)。 我现在试图创build一个方法来避免显示这个标签,如果内部列表是空的,由于筛选(由inputsearch文本应用)

这里是一个解释我的问题和我的尝试解决scheme的笨蛋 : Plnkr

像isGroupEmpty这样的“重”函数看起来非常麻烦 – 有没有办法以更简单的方式做到这一点? 我在玩ng-repeat内部的标签,并且使用ng-show="$first"的想法,但它看起来并不棒

我结束了以下完美工作的解决scheme。 Plnkr

通过在内部重复中设置一个variables,我可以根据这个variables长度来评估ng-show,如下所示:

 <input ng-model='searchText'/> <span ng-show='filtered.length > 0'> <ul> <li ng-repeat='el in filtered = (model | filter:searchText)'> <div>{{el.label}}</div> </li> </ul> </span> 

你可以利用ng-init ,这样你只会调用一次这个filter:

 <div ng-repeat='(key,group) in model'> <div ng-init="filtered = (group | filter:filterFn)"></div> <div ng-show="filtered.length !== 0"> <div>{{key}}</div> <ul> <li ng-repeat="el in filtered"> <div>{{el.label}}</div> </li> </ul> </div> </div> 

通常在不使用ng-init的地方使用ng-init并不是一个好习惯,但是我想它可以解决两次调用filter的问题。 另一种方法是通过JavaScript使用filter – 你可以注入$ filter并在你的控制器中检索'filter' $filter('filter') ,将它作为第一个参数调用它,将filterFn作为第二个参数,在你的范围内。

我使用了以下内容:

 <ul> <li ng-repeat="menuItem in menuItems"><a href="Javascript:void(0);"><span class="fa {{menuItem.icon}} fa-lg"></span>{{menuItem.itemName}}</a> <span ng-show='menuItem.subItems.length > 0'> <ul> <li ng-repeat="subItem in menuItem.subItems"><a href="Javascript:void(0);">{{subItem.itemName}}</a></li> </ul> </span> </li> 

检查数组长度是否为0不是一个昂贵的操作。 如果只想显示包含项目的列表,请在具有数组数组的外部数组上放置一个filter,并仅返回长度不等于0的数组。

如果数组== false,也可以隐藏内部div。

http://plnkr.co/edit/gist:3510140

http://plnkr.co/edit/Gr5uPnRDbRfUYq0ILhmG?p=preview

你的plunkr是相当复杂,难以通过,所以我重新创build你想要的小提琴。 我的方法背后的一般想法是过滤掉数组中的项目,而不是子数组。 只有当文字改变时才进行过滤。 所以这里是标记:

 <div ng-app="app"> <div ng-controller="ParentCtrl"> <input data-ng-model="filterText" data-ng-change="updateTypes()" /> <div data-ng-repeat="type in filteredTypes"> {{ type.name }} <ul> <li style="margin-left:20px;" data-ng-repeat="entry in type.entries"> - {{ entry.name }} </li> </ul> </div> </div> </div> 

这里是代码:

 angular.module('app', []) function ParentCtrl($scope){ $scope.filterText = ""; $scope.types = [ { name: "type1", entries: [{ name: "name1"}, { name: "name2"}, { name: "name3"}]}, { name: "type2", entries: [{ name: "name1"}, { name: "name3"}, { name: "name3"}]}, { name: "type3", entries: [{ name: "name1"}, { name: "name2"}, { name: "name5"}]}, { name: "type4", entries: [{ name: "name4"}, { name: "name2"}, { name: "name3"}]} ]; $scope.filteredTypes = []; $scope.updateTypes = function(){ $scope.filteredTypes.length = 0; for(var x = 0; x < $scope.types.length; x++){ if($scope.filterText === ""){ $scope.filteredTypes.push($scope.types[x]); } else{ var entries = []; for(var y = 0; y < $scope.types[x].entries.length; y++){ if($scope.types[x].entries[y].name.indexOf($scope.filterText) !== -1){ entries.push($scope.types[x].entries[y]); } } if(entries.length > 0){ $scope.filteredTypes.push({ name: $scope.types[x].name, entries: entries }); } } } } $scope.updateTypes(); } 

小提琴 : http : //jsfiddle.net/2hRws/

我创build一个新的数组,而不是使用实际的filter来删除结果的原因是angular度不喜欢在filter中dynamic创builddynamic数组。 这是因为它不分配$$ hashKey和东西只是不正确排队时,脏检查。 我已经明白了如何做到这个问题所需要的: https : //groups.google.com/forum/#! topic/angular/ IEIQok-YkpU

我只是略微修改了你的list-widget.html ,看到它在行动: plunkr

这个想法很简单 – 对ng-show使用相同的filter:

 <div ng-show="group | filter:searchText">{{ key }}</div> 

只有有一些未经过滤的物品才能看到标签。

在我的例子中,我使用searchText进行过滤,因为我不熟悉CoffeeScript。