过滤基于一个子对象属性的NG-重复列表 [英] Filtering an ng-repeat list based on a sub-object property

查看:195
本文介绍了过滤基于一个子对象属性的NG-重复列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

http://jsfiddle.net/KfSBq/

通过子对象我的意思是,我与显示对象NG-重复所有包含对象的列表内自己,我期待基于这些子对象之一的属性过滤。

By sub-object I mean that the objects I am displaying with ng-repeat all contain a list of objects within themselves, and I am looking to filter based on the property of one of those sub-objects.

仅这是很简单的事。我有日报的对象,每个都包含一个日期对象列表:

This alone was quite straightforward to do. I have an object of dailies, each containing a date and an entries list of objects:

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'}]}];
}

我显示出来,按类别过滤:

I display them, filtering by category:

<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>

在这里,我的问题是,现在根本不包含任何条目日常对象仍然显示。怎样实现的情况下,如果滤波使的每日清空列表,即每日则不予显示?

My issue here is that the daily objects that now contain no entries at all are still displayed. How do I achieve a situation where, if the filtering makes the entries list of a daily empty, that daily is not displayed either?

推荐答案

您被允许创建前pressions内新成员的范围。

You are allowed to create new scope members inside the expressions.

这可以让你指定一个筛选的列表到一个新的变量,它可以在整个本地范围内使用。就这样,你可以通过过滤列表的长度NG-显示:

This lets you assign a filtered list to a new variable, which can be used throughout the local scope. With that, you can pass the length of the filtered list to 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

BTW,很好地把问题!

Btw, nicely put question!

这篇关于过滤基于一个子对象属性的NG-重复列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆