132 votes

Comment filtrer un tableau avec AngularJS et utiliser une propriété de l'objet filtré comme attribut ng-model ?

Si j'ai un tableau d'objets et que je veux lier le modèle Angular à une propriété de l'un des éléments en fonction d'un filtre, comment puis-je faire ? Je peux mieux expliquer avec un exemple concret :

HTML :

<!DOCTYPE html>
<html ng-app>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <meta charset=utf-8 />
        <title>JS Bin</title>
    </head>
    <body ng-controller="MyCtrl">
        <input ng-model="results.year">
        <input ng-model="results.subjects.title | filter:{grade:'C'}">
    </body>
</html>

Contrôleur :

function MyCtrl($scope) {
  $scope.results = {
    year:2013,
    subjects:[
      {title:'English',grade:'A'},
      {title:'Maths',grade:'A'},
      {title:'Science',grade:'B'},
      {title:'Geography',grade:'C'}
    ]
  };
}

JSBin : http://jsbin.com/adisax/1/edit

Je veux filtrer la deuxième entrée sur le sujet avec une note 'C', mais je ne veux pas lier le modèle à l'entrée 'C'. grade ; je veux le lier à la titre de la matière qui a obtenu la note "C".

Est-ce possible et, dans l'affirmative, comment s'y prendre ?

6voto

Diego Venâncio Points 1335

Si vous utilisez ES6, vous pouvez le faire :

var sample = [1, 2, 3]

var result = sample.filter(elem => elem !== 2)

/* output */
[1, 3]

Notez également que le filtre ne met pas à jour le tableau existant, il renvoie un nouveau tableau filtré à chaque fois.

4voto

Nelu Malancea Points 388

Vous pouvez également utiliser fonctions con $filter('filter') :

var foo = $filter('filter')($scope.results.subjects, function (item) {
  return item.grade !== 'A';
});

0voto

Amay Kulkarni Points 688

Appliquer le même filtre en HTML avec plusieurs colonnes, juste un exemple :

 variable = (array | filter : {Lookup1Id : subject.Lookup1Id, Lookup2Id : subject.Lookup2Id} : true)

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X