如何使用 AngularJs 过滤 JSON 数据？答案

【问题标题】：How to filter JSON-Data with AngularJs?如何使用 AngularJs 过滤 JSON 数据？
【发布时间】：2012-08-09 00:33:52
【问题描述】：

我有一个包含 JSON 对象的数组 (_users)。

{ 
  "User":
  {
    "userid":"19571",
    "status":"7",
    "active":"1",
    "lastlogin":"1339759025307",
    "Stats":
     [
       {
         "active":"1",
         "catid":"10918",
         "typeid":"71",
         "Credits":
         [
           {
             "content":"917,65",
             "active":"1",
             "type":"C7"
           },               
           {
             "content":"125,65",
             "active":"1",
             "type":"B2"
           }
         ]
       }
     ]
  }
}

1- 如何只过滤“活动”的用户：“1”而不是“0”

我尝试过这样的事情：

<div ng-repeat="user in _users | filter:active | orderBy:user.userid">
    {{user.userid}}
</div>

但对我来说不能正常工作。

谢谢！

【问题讨论】：

标签： javascript json frameworks angularjs

【解决方案1】：

由于您的对象模型有点复杂，我建议您使用自定义过滤功能：

$scope.isActive = function(user) {
    return user.User.Stats[0].active === "1";
};

然后在您的 HTML 中：

<div ng-repeat="user in _users | filter:isActive">
    {{user.User.userid}}
</div>

这里是工作的 jsFiddle：http://jsfiddle.net/pkozlowski_opensource/4kzzy/3/

如果您需要更多信息，请务必查看 Angular 关于过滤器的文档：http://docs.angularjs.org/api/ng.filter:filter

【讨论】：

上面的答案是完美的，但仅供参考，如果您想在绑定到范围之前过滤您的数组，您还可以使用 jQuery.grep() 或 underscore.js jsfiddle.net/NRuM7/1 - jQuery.Grep 中的 _filter ()documentcloud.github.com/underscore/#filter - underscore.js

【解决方案2】：

进一步了解@pkozlowski.opensource 并允许对项目/用户进行实时过滤：

http://jsfiddle.net/hbyNN/

<div ng-controller="MyCtrl">
  <label>userid substring filter:</label>
  <input ng-model="zzzzz">

  <div ng-repeat="user in _users | filter:isInteresting"> 
      <pre>{{user | json}}</pre>
  </div>
</div>

还有：

   $scope.isInteresting = function (user) {
    if ($scope.zzzzz == undefined) {
        return true;
    }

    return user.userid.indexOf($scope.zzzzz) !== -1;
};

【讨论】：