web-dev-qa-db-fra.com

Filtre angulaire exactement sur la clé d'objet

J'ai une petite application angulaire comme celle-ci:

html 

<body ng-app>
  <div ng-controller="Ctrl">
    <div ng-repeat="user in users | filter:1">
      <span>{{ user.username }}, {{ user.id }}</span>
    </div>
  </div>
</body>

app.js 

function Ctrl($scope) {
  $scope.users = [
    {"id":1,"username":"simon",},
    {"id":8,"username":"betty",},
    {"id":14,"username":"archie",},
    {"id":3,"username":"jumbo1"},
  ]
}

sortie 

simon, 1
archie, 14
jumbo1, 3

Ce que je veux faire, c'est filtrer une correspondance exact pour les arguments de filtrage ET filtrer UNIQUEMENT sur le champ id.

En gros, je veux que le résultat soit:

sortie 

simon, 1

J'utilise Angular 1.2.

angularjsangularjs-ng-repeat
33
Darwin Tech

Dans Angular 1.1.3 ou plus récent, vous pouvez utiliser les éléments suivants:

<div ng-repeat="user in users | filter:{'id':  1}:true">

{'id': 1} dit de ne comparer qu'avec le champ id. Cela vous amène:

simon, 1
archie, 14

:true dit "correspondance exacte" entraînant:

simon, 1

Voici ce qui fonctionne: http://jsfiddle.net/AM95H/

Pour filtrer une liste de valeurs, si vous avez la liste dans une variable de portée, ajoutez un filtre personnalisé à votre fichier JS: 

$scope.filterValues = [1,8];
$scope.myFilter = function(value) {
   return ($scope.filterValues.indexOf(value.id) !== -1);
};

Utilisé comme ceci:

<div ng-repeat="user in users |  filter: myFilter">

Pour filtrer une liste de paramètres, nous allons créer notre propre filtre. Dans ce cas, nous serons appelés une fois avec toutes les valeurs d'entrée à tester plutôt qu'une fois par valeur. 

Ainsi, le premier paramètre que nous recevrons est le tableau de valeurs d'entrée (les utilisateurs dans votre cas) et le second paramètre sera le paramètre que nous passons ([1,8]). Nous créerons ensuite un tableau de sortie et ajouterons (Push) tous les éléments du flux d'entrée correspondant à l'un des filterValues. Et retourne le tableau de sortie.

myApp.filter('myFilter', function () {  
   return function(inputs,filterValues) {
      var output = [];
      angular.forEach(inputs, function (input) {
        if (filterValues.indexOf(input.id) !== -1)
            output.Push(input);
       });
       return output;
   };
});

Et utilisez-le comme ceci:

<div ng-repeat="user in users |  myFilter:[1,8]">

En voici un exemple: http://jsfiddle.net/AM95H/2/

83
KayakDave

Basé sur https://docs.angularjs.org/api/ng/filter/filter

Filtrer sur le modèle:

<tr ng-repeat="friendObj in friends | filter:id:true">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
</tr>

Filtrer sur le contrôleur (avec $ param)

$scope.friendObj = $filter('filter')(data.friends, { id: parseInt($stateParams.friendId) }, true)[0];
6
afifahmi

Spécifiez la clé (propriété) de l'objet dans le filtre sur lequel vous souhaitez appliquer le filtre:

//Suppose Object
var users = [{
  "firstname": "RAM",
  "lastname": "KUMAR",
  "Address": "HOUSE NO-1, Example Street, Example Town"
  },
  {
  "firstname": "SHAM",
  "lastname": "RAJ K",
  "Address": "HOUSE NO-1, Example Street, Example Town"
}]

Mais vous souhaitez appliquer le filtre uniquement sur le prénom 

<input type = "text" ng-model = "f_n_model"/>
<div ng-repeat="user in users| filter:{ firstname: f_n_model}">
0
Neeraj Bansal

Vérifiez si cela peut aider

var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
                        if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
                        return obj;
                });
0
Code Spy