Filtra i risultati in angularjs in base al valore selezionato

Question

Sembra che dovrebbe essere facile, ma io sono nuovo per l'angolatura e non afferro questo concetto molto bene. Spero di eseguire una ng-repeat su un set di dati e quindi essere in grado di filtrare i risultati in base a un'opzione selezionata in una casella di selezione, utilizzando lo stesso set di dati.

Ho creato una serie di opzioni e le ho assegnate alla variabile $ 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'}, 
    ] 
}]); 

Poi nel file HTML sto creare dinamicamente la casella di selezione utilizzando NG-opzioni e uso ng-repeat per creare un elenco di queste categorie. Tutto questo funziona bene, ma ora voglio essere in grado di filtrare

<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> 

ho pensato di essere in grado di eseguire un filtro nel seguente modo, ma io sono sempre un errore. Qualcuno può dirmi cosa sto facendo di sbagliato?

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

Ho creato un plunker qui: http://plnkr.co/edit/YwHknAm3X2NUdxDeUjS8?p=preview

Answer 1

È necessario menzionare id direttamente nel vostro filer come id che avrà un aspetto attraverso ourTeamCategories id & per risultato più preciso non aggiungere true alla fine garantirà l'esatta corrispondenza piuttosto che contiene & anche perso due punti :

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

Aggiornamento

Si stanno mescolando due approcci allo stesso tempo come ng-options con ng-repeat. Penso che si dovrebbe attaccare con ng-options, così nel vostro ng-opzione corrente che è l'impostazione title valore nella vostra ng-model

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

Forked Plunkr qui

Answer 2

Hai bisogno di una due punti dopo filter. Prova questo:

filter: {cat.id:catFilter.value}