AngularJS通过嵌套数据进行搜索

时间:2013-10-29 14:40:55

标签: angularjs angularjs-directive

我是AngularJS的新手。我试图根据用户名进行简单的搜索,在我的情况下,它不存储在最顶层。这是一个例子:

<div ng-init="users = [
{'fields':{'name':'Mary Brown','person_nickname':'M'},'username':'mbrown'},
{'fields':{'name':'John Smith','person_nickname':'J-Dog'},'username':'jsmith'}]">
</div>

Here is the plnkr that searches all the fields我想采取这种方式并使其仅搜索fields.name。在这个plunker中,我可以输入“dog”并仍然让第二个用户返回,这不是我想要的。

我尝试将输入的ng-model更改为search.fields.name但是当我这样做时,搜索根本不会激活。我可以在文本框中键入任何字符串,也不会过滤掉任何内容。

我错过了什么?谢谢!

编辑: 完整代码,因为plunker目前已关闭:

<!doctype html>
<html ng-app="App">
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>

  <body>

    <div ng-init="users = [
      {'fields':{'name':'Mary Brown','person_nickname':'M'},'username':'mbrown'},
      {'fields':{'name':'John Smith','person_nickname':'J-Dog'},'username':'jsmith'}]">
    </div>    

    Name only <input ng-model="search.fields"><br>

    <table id="userTable">
      <tr ng-repeat="user in users | filter:search">
        <td>{{user}}</td>
      </tr>
    </table>    

  </body>
</html>

1 个答案:

答案 0 :(得分:0)

Plnkr现在没有运行,但是如果你有一个想要过滤的ng-repeat,那么请查看官方文档,特别是upvoted评论很有用:http://docs.angularjs.org/api/ng.filter:filter

  myArray中的

项目filter:{propertyThatWillBeFiltered:value}

如果您正在讨论在模型中搜索,那么您应该在数组上使用"filter"方法。