过滤不能在角度js模板中工作

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> 

在我的控制，我提到，

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

为什么不工作的过滤器？ PS：我在萤火虫中发生错误“TypeError：href is null”。

Answer 1

你在你的搜索功能得到一个错误。

item.id.indexOf is not a function

你得到这一点，因为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" > 

（您scope属性的名称是query，而不是search）。

Answer 3

像这样改变list.html的代码。你必须通过文本框的NG-模型过滤

<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>