如何在 AngularJS 中按键值过滤 json 列表？答案

【问题标题】：How do you filter a json list by key-value in AngularJS?如何在 AngularJS 中按键值过滤 json 列表？
【发布时间】：2017-05-20 13:25:21
【问题描述】：

我是 AngularJS 的初学者。现在我正在尝试使用ng-repeat 列出一个 json 文件。这些是我所拥有的：

文件名.json：

{
  "name"    : "name data",
  "id"      : "id data",
  "country" : "country data",
  "age"     : "age data",
  "job"     : "job data"
}

列表比这个长得多，但我可以通过ng-repeat 成功地将所有内容打印到表格中，但没有任何过滤器。现在，我正在尝试取出一些物品。在示例中，我可能希望显示没有“id”和“age”。有什么建议可以针对这种情况进行过滤吗？

以下是我在 Stack Overflow 上查找了几个答案后尝试过的，但都失败了。答案很好，但他们的情况并不适合我。

模板：

<table>
  <tr ng-repeat="(key, data) in $ctrl.person | filter: $ctrl.toShow">
    <td>{{key}}</td>
    <td>{{data}}</td>
  </tr>
</table>

控制器功能：

function myCtrl ($http) {
  self = this; 
  self.toShow = function myFilter (key, value) {
    if (key == 'id' || key == 'age') {
      return false;
    } else {
      return true;
    }
  };
  $http.get('filename.json').then(function (response) {
    self.person = response.data;
  });
}

【问题讨论】：

标签： angularjs json filter angularjs-ng-repeat key-value

【解决方案1】：

您可以使用 ng-repeat 和 ng-show 来过滤您想要隐藏的字段，如下所示

<table>
    <tr ng-repeat="(key, data) in $ctrl.person" ng-show="key != 'id' && key != 'age'">
        <td>{{key}}</td>
        <td>{{data}}</td>
    </tr>
</table>

工作fiddle

【讨论】：

【解决方案2】：

 app.filter('toShow', function () {
     return function (input) {
         return JSON.parse(input, ['field1', 'field2']);
     });
 });

上面的代码是基于 JSON.parse() 可以有第二个参数 是一个 JSON 字段数组来抓取。在这里，您将字段显示而不是隐藏。

【讨论】：