如何获取过滤结果?

时间:2016-02-23 22:40:16

标签: angularjs ng-repeat ng-filter

我希望能够从过滤的结果列表中提取 最佳 值,这是我的测试页:

http://plnkr.co/edit/MCLTKUGpIyuYYjv7DLFM?p=preview

模板

<div ng-controller="repeatController">
  <input type="search" ng-model="q" placeholder="filter results..." />
  <ul>
    <li ng-repeat="friend in friends | filter:q as results">
      [{{$index + 1}}] {{friend.names[0]}}
    </li>
    <li ng-if="results.length == 0">
      <strong>No results found...</strong>
    </li>
  </ul>
</div>

控制器

var app = angular.module('app', []);
app.controller('repeatController', function($scope) {
  $scope.friends = [
    {names:['David King', 'Davey', 'oodavid', 'Queenie']},
    {names:['Paul King', 'Pablo', 'The Iron Paul']},
    {names:['Michael P O\'Keefe', 'Miguel Vennie']},
    {names:['James Griffiths', 'The Kraken', 'Thee Krakken']},
    {names:['Queen Elizabeth', 'The Queen']}
  ];
});

当我输入&#34;&#34;在搜索框中,我看到这些人有&#34;&#34;在他们的一个名字(这是正确的名单)......

  • Paul King
  • James Griffiths
  • 伊丽莎白女王

...但是,我想从names数组中选出最佳匹配,而不是仅使用 第一个 值,因此它应该像这样渲染:< / p>

  • 铁保罗
  • The Kraken
  • 女王

任何指针?

1 个答案:

答案 0 :(得分:1)

从您的代码中我了解到您希望在显示时仅显示第一个值但在搜索时您希望显示子集而不是第一个值。可以通过以下更改来实现:

<ul>
    <!-- Filter the subset containing search text -->
    <span ng-repeat="friend in friends| filter:q as results">
      <!-- Filter again in subset to obtain the actual value -->
      <li ng-if="(!q && $first) || (q)" ng-repeat="name in friend.names| filter:q as results">
        <span>{{name}}</span>
      </li>
    </span>
    <span ng-if="results.length == 0">
      <strong>No results found...</strong>
    </span>
</ul>

使用条件(!q && $first) || (q)在没有搜索文本时显示第一个值,并在有搜索文本时显示所有值。

Updated Plunker

相关问题