Question

我有一个多重过滤器的工作示例（在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

要添加上述答案，对于多个选择，值将在数组中传递。在按钮上单击＆＃39; ALL＆＃39;，将传递字符串值数组。

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

Answer 2

尝试这样的事情：

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

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

希望有所帮助：）

Answer 3

签出代码段，这对你有用吗？

＆＃13;

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"
    }
  ];
  
}

＆＃13;

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

＆＃13;

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

3 个答案: