在angularjs中搜索和过滤多个模型

时间:2014-05-03 10:34:33

标签: javascript angularjs angular-directive

我创建了一个示例应用here。我的应用在范围内有2个对象数组,名称为datadata2。我也有2个指令:

app.directive('root',function(){
return {
scope:{
  items:'='
},
restrict:'AE',
template:'<ul><li>Item<ul><li ng-repeat="item in items"><show-item mo="item"></show-item>l</li></ul></li></ul>'
  };
});
 app.directive('showItem',function(){
return {
restrict:'EA',
scope:{
  mo:'='
},
controller:function(){

},
template:'<span>{{mo.name}}</span>'
};
});

我有一个输入搜索在模型中按名称搜索。但是如何在一个输入中通过相同的查询搜索这两个模型

1 个答案:

答案 0 :(得分:1)

将模型附加到您的搜索输入:

<input type="search" ng-model="search" />

在指令范围内为此模型添加双向绑定,并使用它来过滤ng-repeat项目:

<root items="data" search="search"></root> 
<root items="data2" search="search"></root>

app.directive('root',function(){
  return {
    scope:{
      items:'=',
      search:'='
    }, 
    restrict:'AE',
    template:'<ul><li>Item<ul><li ng-repeat="item in items | filter:search"><show-item mo="item"></show-item>l</li></ul></li></ul>'
  };
});

Updated JS Bin