如何在Angular中仅通过一个值过滤数据？

I have a working example of multiple filter (view at CodePen) to sort amont of data by Material and Construction parameters.

我有一个多个过滤器（在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>

But this is a question: what i need to do to filter that data by pushing on buttons? Coz my solution not working...

但这是一个问题：我需要做什么来通过按下按钮来过滤数据？因为我的解决方案不起作用......

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

Thank you!

谢谢！

3 个解决方案

#1

Try something like this:

尝试这样的事情：

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

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

Hope it helps :)

希望能帮助到你：）

#2

To add to the above answers, For multiple select, the values are to be passed in array. On button click of 'ALL', array of string values are to be passed.

要添加到上面的答案，对于多个选择，值将在数组中传递。在按钮上单击“ALL”，将传递字符串值数组。

Included ng-click for buttons in your code.

在代码中包含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>

#3

Checkout the snippet, does this work for you?

查看代码段，这对您有用吗？

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>

#1