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

Question

我在这里创建了一个示例应用程序。我的应用程序在范围内有 2 个对象数组，名称为data和data2。我也有 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>'
};
});

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

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

更新了 JS Bin