過濾的NG-重複列表基於子對象屬性

的jsfiddle http://jsfiddle.net/KfSBq/過濾的NG-重複列表基於子對象屬性

到子對象我的意思是，我與顯示對象NG-重複所有包含內自己的對象的列表，我希望根據這些子對象之一的屬性進行過濾。

這樣做很簡單。我有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也不會顯示出來？

來源

2013-07-07 Elise

我認爲你必須創建你自己的過濾器 – Ven

您可以在表達式中創建新的作用域成員。

這可讓您將過濾列表分配給新變量，該變量可用於整個本地範圍。有了這一點，你可以通過過濾列表的長度NG-顯示：

<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，很好地把問題！

來源

2013-07-07 17:35:27 Stewie

哇，這太棒了！有點直觀，雖然在filteredEntries實際定義之前使用filteredEntries.length，但我想這只是角度.. – Elise

這很酷。無論如何，將filteredEntries保存到鏈上更高的作用域變量中，或者保存在rootScope中？ – morgs32

非常優雅的解決方案，我試圖編寫的複雜循環自定義過濾器更容易完成相同的任務。謝謝！ –

過濾的NG-重複列表基於子對象屬性

回答

相關問題