Seçme değerine göre angularjs süzgeç sonuçları

Question

Bu kolay olması gerektiği gibi görünüyor, ancak ben bu konsepti çok iyi kavramak değil açılışı yeniyim. Bir veri kümesi üzerinde bir ng-tekrarı çalıştırmayı umuyoruz ve daha sonra, aynı veri kümesini kullanarak bir seçim kutusunda seçilen bir seçeneğe göre sonuçları filtreleyebiliyorum.

Bir dizi seçenek oluşturdum ve bunları $ scope.OurTeamCategories değişkenine atadım.

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'}, 
    ] 
}]); 

Ardından HTML dosyası içinde ben dinamik olarak bu kategorilerin bir listesini oluşturmak için ng-seçenekleri ve kullanım ng tekrarı kullanarak seçme kutusu oluşturmak ediyorum. Bu, tüm iyi çalışır, ama şimdi ben şu şekilde bir filtre çalıştırmak mümkün olacağını düşündüm

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

filtre edebilmek istiyorum ama bir hata alıyorum. Bana yanlış ne yaptığımı söyleyen var mı?

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

Burada bir plunker oluşturduk: http://plnkr.co/edit/YwHknAm3X2NUdxDeUjS8?p=preview

Answer 1

Sen tam eşlemeyi sağlayacak sonunda true eklemek yerine & içeren do daha doğru sonuç için ourTeamCategories id & aracılığıyla yukarı bakacak id gibi dosyalayıcıda doğrudan id bahsetmek gerekir Ayrıca iki nokta üst :

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

Güncelleme

cevapsız

ng-repeat ile ng-options gibi iki yaklaşımı aynı anda karıştırıyorsunuz. Sana ng-options ile sopa gerektiğini düşünüyorum, bu yüzden, mevcut ng-seçeneğinde burada

Answer 2

Sen filter sonra iki nokta üst üste gerekir. Bu deneyin:

filter: {cat.id:catFilter.value}