Question

我想根据多个字段过滤结果。

HTML

<input type="text" ng-model="query">

<ul>
  <li ng-repeat="x in phones | filter: search | orderBy:orderProp" >
    <span>{{x.name}}</span>
    <p> {{ x.id}} </p>
    <p> {{ x.age}} </p>
  </li>

</ul>

在我提到的控制器中，

$scope.search = function (item) {

          return ( (item.name.indexOf($scope.query || '') ) !== -1 || (item.id.indexOf($scope.query || '')) !== -1);

    };

Plnkr：http://plnkr.co/edit/a1khZS9RcFdgitTYPgqs?p=preview

为什么过滤器无法正常工作？ PS：我在firebug中收到错误“TypeError：href is null”。

Answer 1

您的搜索功能出现错误。

item.id.indexOf不是函数

你得到的是因为item.id是一个整数文字。

您可以先尝试转换id.toString（），或者将查询解析为整数。

$scope.search = function(item) {

  return ((item.name.indexOf($scope.query || '')) !== -1 || (item.id.toString().indexOf($scope.query || '')) !== -1);

};

Here是一个有效的例子。匹配区分大小写，因此请记住这一点。

Answer 2

只需替换：

<li ng-repeat="x in phones | filter: search| orderBy:orderProp" >

带

<li ng-repeat="x in phones | filter: query | orderBy:orderProp" >

（范围属性的名称为query而非search）。

Answer 3

像这样更改list.html的代码。您必须通过带有过滤器

的文本框＆ng-ng-model

<div class="container">

    <input type="text" ng-model="query">

    <ul>
      <li ng-repeat="x in phones | filter: query | orderBy:orderProp" >
        <span><a ng-href="#/phones/{{x.id}}">{{x.name}}</a></span>
        <p> {{ x.id}} </p>
        <p> {{ x.age}} </p>
      </li>

    </ul>

 </div>

过滤不适用于角度js模板

3 个答案: