Question

我正在使用Angular和Ionic来显示一些列表并过滤这些列表。我现在想要实现的是显示文本过滤后显示的适当数量的列表。

为了向您展示出现了什么问题，我在Codepen中进行了说明：

那么出了什么问题？好吧，尝试通过随机查询来过滤列表。你会看到它会继续说有＃50; 50人，而你没有，如果你要查询＆＃34; MichaelBlabla＆＃34;，例如。

所以我想要实现的是显示正确数量的项目（或不显示）。所以，如果没有显示任何内容，我希望看到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>

我该怎么做？我觉得这个过滤器根本就没有更新查询...

Answer 1

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>）强制angular搜索各种范围，直到找到collectionData对象。这是因为我们在collection-repeat指令的范围内工作，所以如果您尝试<span ng-bind="myCountVal = results.length" ..></span>之类的内容，那么myCountVal将被分配到collection-repeat的范围内1}}指令，它会阻止你在collection-repeat指令范围之外使用，这实际上是这里的关键目标：重复过滤项目列表，并显示计算在列表本身之外的页面上的某个位置。

如何在文本过滤后显示项目数量？

1 个答案: