如何顯示文本過濾後的項目數量？

我使用Angular和Ionic來顯示一些列表並過濾這些列表。我現在想要實現的目的是顯示文本過濾後顯示的正確數量的列表。如何顯示文本過濾後的項目數量？

要告訴你什麼錯誤，我已經說明了它在Codepen：

那麼，什麼地方出了錯？那麼，試着通過隨機查詢來過濾列表。例如，您會看到它會一直說「有50人」，而如果您要查詢「MichaelBlabla」，則沒有。

所以我想要實現的是顯示正確的項目數量顯示（或未顯示）。所以如果沒有顯示，我想看到0人。

<div class="list"> 
    <a class="item my-item" 
     collection-repeat="item in contacts | filter:{name:blablabla} | orderBy:'first_name' | searchContacts:search" 
     collection-item-height="60" 
     collection-item-width="'100%'"> 
     <img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}"> 
     {{item.first_name+' '+item.last_name}} 
    </a> 
    </div> 

    <p>Showing {{contacts.length}} Persons</p>

我該怎麼做？我感覺這個過濾器根本就沒有更新查詢...

來源

2016-12-24 Siyah

Ionic的collection-repeat指令不支持ng-repeat's ability to use an alias expression在應用過濾器後存儲中繼器的結果，所以你有跳過幾圈。這是你的代碼中，將使用ng-repeat，只是設置基線版本：

<div ng-repeat="item in contacts | filter:{name:blablabla} | orderBy:'first_name' | searchContacts:search as results"> 
    <p>Number of Results: {{ results.length }}</p> 
</div>

但由於您使用的collection-repeat，你必須做到以下幾點：

首先，在控制器，集增加一個可以保存計數值的範圍值。請注意，這需要是一個散列對象，如$scope.collectionData = {length: 0 };。（現在略過，這是一個範圍問題，稍後會介紹）。其次，在您的模板中，collection-repeat指令需要以分配類型的方式使用。第三，你需要，我們可以作爲一個容器使用的計數值分配給collectionData.length值一個隱藏的元素破解：

<div collection-repeat="item in (results = (contacts | filter:{name:blablabla} | orderBy:'first_name' | searchContacts:search))"> 
    <span ng-bind="collectionData.length = results.length" ng-show="false"></span> 
    <p>Number of Results: {{ collectionData.length }}</p> 
</div>

我已經更新您的codepen：http://codepen.io/anon/pen/MbdQMb。

至於範圍問題，我跳過了：使用賦值中的對象符號（<span ng-bind="collectionData.length = ..." ...></span>）強制角度搜索各個範圍，直到找到collectionData對象。這是因爲我們在collection-repeat指令的範圍內工作，所以如果您嘗試類似<span ng-bind="myCountVal = results.length" ..></span>之類的內容，那麼myCountVal將被分配到collection-repeat指令的範圍，這會阻止您使用它的範圍之外的collection-repeat指令，這實際上是這裏的關鍵目標：重複已過濾項目的列表，並在列表本身之外的頁面上的某處顯示計數。

來源

2016-12-24 21:03:31 YellowShark

謝謝，但是當我這樣做，我的過濾器不再工作了。你可以在這裏看到它：http://codepen.io/anon/pen/gLJXQP – Siyah

我已經更新了我的答案和codepen，再給它一次，讓我知道如何適合你。 – YellowShark

謝謝你。幾乎在那裏......我想每次都顯示文字，所以不僅在沒有人時。我們也可以這樣做嗎？ – Siyah

如何顯示文本過濾後的項目數量？

回答

相關問題