角度で1つの値だけデータをフィルタリングする方法は？

Question

私はMaterialとConstructionパラメータでデータを並べ替えるために複数のフィルター（CodePenで表示）の実例を持っています。

<select multiple="multiple" ng-model="selectedMaterial" ng-options="emp.material as emp.material for emp in empList | unique:'material'"> 
</select> 

<table class="table table-bordered"> 
    <tr> 
    <th>Material</th> 
    <th>Construction</th> 
    </tr> 
    <tr ng-repeat="emp in empList | filterMultiple:{material:selectedMaterial,construction:selectedConstruction}"> 
    <td>{{emp.material}}</td> 
    <td>{{emp.construction}}</td> 
    </tr> 
</table> 

これは質問です。ボタンを押してそのデータをフィルタリングする必要がありますか？私の解決策がうまくいかない...

<button ng-click="filterMultiple= {material: 'Steel'}">Steel</button> 

ありがとう！

Answer 1

はこのような何かを試してみてください：

<tr ng-repeat="emp in empList | filter:{material:selectedMaterial,construction:selectedConstruction}"> 

<button ng-click="selectedMaterial = 'Steel'">Steel</button> 

はそれが役に立てば幸い:)

Answer 2

チェックアウトスニペット、あなたのためにこの仕事をしますか？

angular.module("app", []) 
 
     .controller("MainController", MainController); 
 

 
function MainController() { 
 
    var vm = this; 
 
    
 
    vm.valuesFilter = { 
 
    material: "", 
 
    construction: "" 
 
    }; 
 
    
 
    vm.values = [ 
 
    { 
 
     material: "Steel", 
 
     construction: "Standard" 
 
    }, { 
 
     material: "Steel", 
 
     construction: "Perforated" 
 
    }, { 
 
     material: "Polypropylene", 
 
     construction: "Standard" 
 
    }, { 
 
     material: "Polypropylene", 
 
     construction: "Perforated" 
 
    } 
 
    ]; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="MainController as mainVm"> 
 
    <button ng-click="mainVm.valuesFilter.material = 'Steel'">Steel</button> 
 
    <button ng-click="mainVm.valuesFilter.material = 'Polypropylene'">Polypropylene</button> 
 
    
 
    <hr/> 
 
    
 
    <button ng-click="mainVm.valuesFilter.construction = 'Standard'">Standard</button> 
 
    <button ng-click="mainVm.valuesFilter.construction = 'Perforated'">Perforated</button> 
 
    
 
    <hr/> 
 
    
 
    <div ng-repeat="value in mainVm.values | filter:mainVm.valuesFilter"> 
 
    {{value.material}} - {{value.construction}} 
 
    </div> 
 
</div>

Answer 3

上記回答に追加するには、複数選択の場合、値は配列で渡されるべきです。 'ALL'ボタンをクリックすると、文字列値の配列が渡されます。

コード内のボタンにはng-clickが含まれています。

<div class="panel-body text-center"> 
    <div class="col-xs-3"> 
     <button ng-click="selectedMaterial = 'Steel'">Steel</button> 
     </div> 
     <div class="col-xs-3"> 
     <button ng-click="selectedMaterial = ['Polycarbonate']">Polycarbonate</button> 
     </div> 
     <div class="col-xs-3"> 
      <button ng-click="selectedMaterial = ['Polypropylene']">Polypropylene</button> 
     </div> 
     <div class="col-xs-3"> 
      <button ng-click="selectedMaterial = ['Steel', 'Polycarbonate', 'Polypropylene']">All</button> 
     </div> 
</div>