具有OR条件属性的ng-repeat过滤器

时间:2018-02-05 09:18:50

标签: javascript angularjs

我想从文本框中过滤带有模型值的列表。

实施例

 var person={};
 person.Id=1;
 person.Name="Test 1";
 person.PetName="Rest 1"

 var persons=[];
 persons.push(person);

 person.Id=2;
 person.Name="Test ds";
 person.PetName="Rest sd";
 persons.push(person);

人数组将有多个人。 在HTML中我有一个搜索框。

<input type="text" ng-model="seachText" placeholder="search by Name and pet name"/>

<div ng-repeat="person in persons | filter : {$:seachText}">
<div>{{person.Name}}</div>
</div>

案例1:

当我在文本框中输入2时,将显示一个结果。我不想要那个。 我想只按名称和宠物名称进行过滤。

如果没有自定义过滤器,是否有可能实现这一目标? filter指令是否允许属性的OR条件?

请帮忙。感谢。

1 个答案:

答案 0 :(得分:1)

对我来说custom "OR" filter是首选解决方案,但是你可以使用内置filter两次(对于每个OR条件)然后使用UNION ALL 结果:

&#13;
&#13;
angular.module('app', []).controller('ctrl', function($scope){
  $scope.persons = [
    {Id:95, Name:"Tom", PetName: "Pet1"},
    {Id:96, Name:"Sam", PetName: "Pet2"},
    {Id:97, Name:"Max", PetName: "Pet3"},
    {Id:98, Name:"Henry", PetName: "Pet4"}
  ]
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='ctrl'>
  <input type='text' ng-model='search'/>
  <div ng-repeat='person in temp = (persons | filter : {Name: search})'>
    {{person | json}}
  </div>
  <div ng-repeat='person in persons | filter : {PetName: search}' ng-if='temp.indexOf(person) == -1'>
    {{person | json}}
  </div>
</div>
&#13;
&#13;
&#13;