根据子对象属性过滤 ng-repeat 列表
Posted
技术标签:
【中文标题】根据子对象属性过滤 ng-repeat 列表【英文标题】：Filtering an ng-repeat list based on a sub-object property 【发布时间】：2013-07-05 01:19:55 【问题描述】：jsfiddle http://jsfiddle.net/KfSBq/
子对象是指我使用 ng-repeat 显示的对象都包含一个对象列表，我希望根据其中一个子对象的属性进行过滤。
仅此一项就很简单了。我有一个dailies 的对象，每个对象都包含一个date 和一个entries 对象列表：
function Ctrl($scope)
$scope.dailies = [date: new Date('07/07/2013'),
entries: [category: 'A', note:'Lorem ipsum',
category: 'B', note: 'Lorem ipsum'],
date: new Date('05/02/2013'),
entries: [category: 'A', note: 'Lorem ipsum']];
我显示它们，按类别过滤：
<div ng-controller="Ctrl">
<div class="daily" ng-repeat="daily in dailies | orderBy:'-date' ">
daily.date | date:'dd/MM/y'
<div class="entry" ng-repeat="entry in daily.entries | filter: category: 'B' ">
<span> entry.category </span>, <span> entry.note </span>
</div>
</div>
</div>
我的问题是现在根本不包含条目的日常对象仍然显示。如果过滤使daily 的entries 列表为空，那么daily 也不会显示，我该如何实现？
【问题讨论】：
我认为你必须创建自己的过滤器 【参考方案1】：您可以在表达式中创建新的范围成员。
这使您可以将过滤列表分配给新变量，该变量可在整个本地范围内使用。这样，您可以将过滤列表的长度传递给 ng-show：
<body ng-app>
<div ng-controller="Ctrl">
<div class="daily"
ng-repeat="daily in dailies | orderBy:'-date' "
ng-show="filteredEntries.length"
>
daily.date | date:'dd/MM/y'
<div class="entry"
ng-repeat="entry in filteredEntries = (daily.entries | filter: category: 'B')"
>
<span> entry.category </span>, <span> entry.note </span>
</div>
</div>
</div>
</body>
FIDDLE
顺便说一句，很好地提出问题！
【讨论】：
哇，太棒了！虽然有点反直觉，但在 filterEntries 实际定义之前使用了 filteredEntries.length ，但我想这只是有角度的.. 这很酷。有没有办法将filteredEntries保存到链上更高的范围变量中，或者例如在rootScope中？ 非常优雅的解决方案，比我试图编写的复杂循环自定义过滤器更容易完成同样的事情。谢谢！ 不幸的是，这个解决方案实际上并没有过滤每日任务列表，而只是隐藏了不需要的每日任务。这是一个很好的解决方法，但我个人正在寻找一个过滤列表，这样我就可以得到我过滤的“每日”计数。以上是关于根据子对象属性过滤 ng-repeat 列表的主要内容，如果未能解决你的问题，请参考以下文章
使用 ng-repeat 显示包含重复对象的对象子数组列表，每个索引有 1 个项目符号