如何使用 ng-repeat 对二维 json 对象应用过滤器？答案

【问题标题】：How to apply filter for 2 dimensional json object with ng-repeat?如何使用 ng-repeat 对二维 json 对象应用过滤器？
【发布时间】：2014-07-31 09:26:03
【问题描述】：

这是我的 json：

[{"node":
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.',
     'age': 1}},
    {"node":{'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.',
     'age': 2}},
    {"node":{'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.',
     'age': 3}}
  ];

这是我的代码：

Search-title: <input type='text' ng-model="name">
    <div class='cat' ng-repeat="(key,value) in phones ">
      <ul ng-repeat="fin in value | filter:name ">
        <li><h3>{{fin.name}}</h3>
        {{fin.snippet}}
        </li>
      </ul>
    </div>

如何为这个 json 对象应用过滤器？

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

请看这里：http://jsbin.com/kovegi/1/edit?html,js,output CodingNinja 很接近，只需使用 ng-model="searchObj.node.name" 代替 ng-model="searchObj.name"

<div ng-controller="firstCtrl">
Search-title: <input type='text' ng-model="searchObj.node.name">
    <div class='cat' ng-repeat="(key,value) in phones  | filter:searchObj ">

  <ul ng-repeat="fin in value">
    <li><h3>{{fin.name}}</h3>
    {{fin.snippet}}
    </li>
  </ul>
</div>

【讨论】：

searchObj.node.name 不起作用它只能在一次嵌套之前起作用
@CodingNinja 你检查过 jsbin 吗？

【解决方案2】：

不要直接在过滤器中使用您的模型，而是将其设为对象并将值设置在同一变量中，然后在搜索中使用它

Search-title: <input type='text' ng-model="searchObj.node">
<div class='cat' ng-repeat="(key,value) in phones | filter:searchObj">
  <ul ng-repeat="fin in value">
    <li><h3>{{fin.name}}</h3>
    {{fin.snippet}}
    </li>
  </ul>
</div>

【讨论】：