如果嵌套的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。
你的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。
