2017-11-13 8 views
3

複数のドロップダウンでフィルタリングしようとしています。 例えば、valueとnumの2つの数値で絞り込んだ場合、 "value = 1、num = 5"で検索すると対応するデータはありませんが、 "id = '000'"のデータが表示されます。 どこで修正する必要がありますか?複数のドロップダウンを持つ角フィルター

plunker:http://plnkr.co/edit/IBRDuHYtSCUFV1xNxjh4?p=preview

HTML

<body ng-controller="MainCtrl"> 
<div> 
    <div> 
     <div> 
      <span>value</span> 
      <select class="form-control" ng-model="value_1"> 
       <option ng-repeat="value in product_value" value="{{value}}">{{value}}</option> 
      </select> 
      <span>num</span> 
      <select class="form-control" ng-model="num_1"> 
       <option ng-repeat="num in product_num" value="{{num}}">{{num}}</option> 
      </select> 
     </div> 
     <div> 
      <span>value</span> 
      <select class="form-control" ng-model="value_2"> 
       <option ng-repeat="value in product_value" value="{{value}}">{{value}}</option> 
      </select> 
      <span>num</span> 
      <select class="form-control" ng-model="num_2"> 
       <option ng-repeat="num in product_num" value="{{num}}">{{num}}</option> 
      </select> 
     </div> 
    </div> 
     <table> 
     <tr> 
      <th> 
      id 
      </th> 
      <th> 
      name 
      </th> 
     </tr> 
     <tr ng-repeat="products in products | filter:{main:{value:value_1}} | filter:{main:{num:num_1}} | 
     filter:{main:{value:value_2}} | filter:{main:{num:num_2}}"> 
      <td>{{products.id}}</td> 
      <td>{{products.name}}</td> 
     </tr> 
     </table> 
</div> 

JS

var app = angular.module('TestMode', []); 

app.controller('MainCtrl', function($scope, $filter) { 
    $scope.product_value = ["1", "2", "3", "4", "5"]; 
    $scope.product_num = ["1", "2", "3", "4", "5"]; 
    $scope.products = [ 
     { 
     id: "000", 
     name:'A', 
     main:[ 
      { 
       value: "1", 
       num: "1" 
      },{ 
       value: "1", 
       num: "2" 
      },{ 
       value: "1", 
       num: "3" 
      },{ 
       value: "2", 
       num: "4" 
      },{ 
       value: "2", 
       num: "5" 
      } 
     ] 
     },{ 
     id: "001", 
     name:'B', 
     main:[ 
      { 
       value: "5", 
       num: "5" 
      },{ 
       value: "5", 
       num: "4" 
      },{ 
       value: "5", 
       num: "3" 
      },{ 
       value: "4", 
       num: "2" 
      },{ 
       value: "4", 
       num: "1" 
      } 
     ] 
     } 
    ]; 

}); 
+0

でフィルタリング?関数呼び出しを使うと簡単に実現できます。 –

+0

本当ですか?今回は角度を使用したかったのです。 – Bicepper

答えて

2

代わりにあなたのコードの下にこれを使用してください。

ng-repeat="products in products | filter:{main:{value:value_1,num:num_1}} | 
filter:{main:{value:value_2,num:num_2}}" 

の作業のデモ:製品にhttp://plnkr.co/edit/K5Xq3QOo1Kfs5Lw5yiAJ?p=preview

+0

素晴らしい!お手伝いありがとう! – Bicepper

1

変更製品。あなたは角度フィルタを使用する必要がなぜ

は、必ず2つのプロパティの代わりに、1

<tr ng-repeat="product in products | filter:{main:{value:value_1,num:num_1}} | filter:{main:{value:value_1,num:num_1}}"> 
    <td>{{product.id}}</td> 
    <td>{{product.name}}</td> 
</tr> 

http://plnkr.co/edit/VXz8h5y8273rgHL7uMgS?p=preview

+0

助けてくれてありがとう! – Bicepper

関連する問題