web-dev-qa-db-fra.com

Filtrer les résultats en angularjs en fonction de la valeur sélectionnée

Cela semble être facile, mais je suis nouveau dans angular et je ne saisis pas très bien ce concept. J'espère exécuter une répétition ng sur un ensemble de données et être en mesure de filtrer les résultats basé sur une option sélectionnée dans une zone de sélection, en utilisant exactement le même ensemble de données.

J'ai créé un tableau d'options et les ai attribuées à la variable $ scope.OurTeamCategories.

angular.module('app', [])
.controller('Main', ['$scope', function($scope) {
   $scope.ourTeamCategories = [
        {"id":18,"title":'Management'},
        {"id":19,"title":'Administration'},
        {"id":21,"title":'Designers'},
        {"id":22,"title":'Accounts'},
    ]
}]);

Ensuite, dans le fichier HTML, je crée dynamiquement la boîte de sélection en utilisant ng-options et utilise ng-repeat pour créer une liste de ces catégories. Tout fonctionne bien, mais maintenant je veux pouvoir filtrer

<div ng-app="app">
  <div ng-controller="Main">
    <select name="show-filter"  ng-model="catFilter" ng-options="category.title for category in ourTeamCategories">
          <option value="{{category.id}}"></option>
      </select>

  <li ng-repeat="cat in ourTeamCategories">
      <h3>{{cat.title}}</h3>
      <!-- for testing -->
     <b>input: {{catFilter.id}}</b> - - ID: {{cat.id}}
  </li>
   </div>
</div>

Je pensais pouvoir exécuter un filtre de la manière suivante, mais je reçois une erreur. Quelqu'un peut-il me dire ce que je fais mal?

<li ng-repeat="cat in ourTeamCategories | filter {cat.id:catFilter.value}">

J'ai créé un plunker ici: http://plnkr.co/edit/YwHknAm3X2NUdxDeUjS8?p=preview

angularjsangularjs-ng-repeatng-optionsangular-filters
12
Starfs

Vous devez mentionner l'identifiant direct dans votre filer comme id qui recherchera à travers ourTeamCategories id & pour un résultat plus précis, ajoutez true à la fin assurera la correspondance exacte plutôt que contient et aussi deux points manqués :

<li ng-repeat="cat in ourTeamCategories | filter : {id: catFilter.id}: true">

Mise à jour

Vous mélangez deux approches en même temps comme ng-options avec ng-repeat. Je pense que vous devriez vous en tenir à ng-options, donc dans votre option ng actuelle qui définit title valeur dans votre ng-model

<select name="show-filter" ng-model="catFilter" 
   ng-options="category as category.title for category in ourTeamCategories">
</select>

Plunkr fourchu ici

18
Pankaj Parkar

Vous avez besoin de deux points après filter. Essaye ça:

filter: {cat.id:catFilter.value}

2
idursun