web-dev-qa-db-ja.com

選択値に基づいてanglejsの結果をフィルタリング

これは簡単なように思えますが、私はangularが初めてであり、この概念をあまりよく理解していません。選択ボックスで選択されたオプションに基づいて、まったく同じデータセットを使用します。

オプションの配列を作成し、変数$ 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'},
    ]
}]);

次に、HTMLファイルで、ng-optionsを使用して動的に選択ボックスを作成し、ng-repeatを使用してこれらのカテゴリのリストを作成します。これはすべて正常に動作しますが、今はフィルタリングできるようにしたいです

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

次の方法でフィルターを実行できると思いましたが、エラーが発生しています。誰かが私が間違っていることを教えてもらえますか？

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

ここにプランカーを作成しました： http://plnkr.co/edit/YwHknAm3X2NUdxDeUjS8?p=preview

angularjsangularjs-ng-repeatng-optionsangular-filters
12
Starfs

id idを検索するourTeamCategoriesなどのファイラーで直接IDを指定する必要があります。より正確な結果を得るには、最後にtrueを追加して、正確に一致するようにします。含まれている＆コロンが欠落している:

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

更新

ng-optionsとng-repeatのように、同時に2つのアプローチを混ぜています。 ng-optionsに固執すべきだと思うので、ng-modelのtitle値を設定している現在のng-optionで

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

Forked Plunkr ここ

18
Pankaj Parkar

filterの後にコロンが必要です。これを試して：

filter: {cat.id:catFilter.value}

2
idursun