web-dev-qa-db-fra.com

Comment filtrer les données JSON avec AngularJs?

J'ai un tableau (_users) qui contient des objets JSON.

{ 
  "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- Comment filtrer uniquement les utilisateurs avec "actif": "1" et non "0"

J'ai essayé quelque chose comme ça:

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

mais ne fonctionne pas correctement pour moi.

Je vous remercie!

javascriptjsonframeworksangularjs
19
Vural Acar

Étant donné que votre modèle d'objet est assez complexe, je recommanderais d'utiliser une fonction de filtrage personnalisée:

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

puis dans votre HTML:

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

Voici le jsFiddle qui fonctionne: http://jsfiddle.net/pkozlowski_opensource/4kzzy/3/

Assurez-vous de vérifier la documentation d'angular sur les filtres si vous avez besoin de plus d'informations: http://docs.angularjs.org/api/ng.filter:filter

39
pkozlowski.opensource

Prenant @ pkozlowski.opensource un peu plus loin et permettant le filtrage en direct des éléments/utilisateurs:

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>

Et:

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

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