0

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

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']}
  ];
});

当我在搜索框中输入“the”时，我看到这些人的其中一个名字中有“the”（这是正确的列表）......

  • 保罗金
  • 詹姆斯·格里菲斯
  • 伊丽莎白女王

...但是，我想从 names 数组中提取最佳匹配，而不是仅使用第一个值，因此它应该呈现如下：

  • 铁保罗
  • 海妖
  • 皇后

任何指针？

4

1 回答 1

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)在没有搜索文本时显示第一个值，在有搜索文本时显示全部。

更新的 Plunker

于 2016-02-24T04:32:28.430 回答