web-dev-qa-db-ja.com

サブオブジェクトプロパティに基づいてng-repeatリストをフィルタリングする

jsfiddle http://jsfiddle.net/KfSBq/

サブオブジェクトとは、ng-repeatで表示しているすべてのオブジェクトに、その中にオブジェクトのリストが含まれていることを意味します。これらのサブオブジェクトの1つのプロパティに基づいてフィルタリングすることを検討しています。

これだけでも非常に簡単でした。 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>

ここでの私の問題は、エントリがまったく含まれていない毎日のオブジェクトが引き続き表示されることです。フィルタリングによってentriesのdailyリストが空になった場合、そのdailyも表示されない状況を達成するにはどうすればよいですか？

angularjsangularjs-filter
34
Elise

式内に新しいスコープメンバーを作成できます。

これにより、フィルターされたリストを新しい変数に割り当てることができます。これは、ローカルスコープ全体で使用できます。これにより、フィルタリングされたリストの長さを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 [〜＃〜]

ところで、きちんと質問をしてください！

48
Stewie