Как фильтровать данные только одним значением в Угловом?

Question

У меня есть рабочий пример нескольких фильтров (просмотр по CodePen) для сортировки данных данных по параметрам Material and Construction.

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

Но это вопрос: что мне нужно сделать, чтобы отфильтровать эти данные, нажав на кнопки? Coz мое решение не работает ...

<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

Checkout сниппает, делает эту работу за вас?

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>