Angularjs动态过滤

Question

假设我有模型：

$scope.items = [{'name: 'test',value:'some value',category:'test'},{name:'value',value:'test',category:'test'}];

哪些是迭代的：

<div ng-repeat="item in items|filter:search">
{{item.name}} – {{item.value}}
</div>

并且有一个带有过滤器模型的输入框：

<input type="text" ng-model="search.$" />

当我输入“测试”时，它会显示两条记录。但是，我需要动态选择将用于搜索的初始对象的属性。

所以，我有三个复选框（在实际项目中我有更多选项可以组合）：

<input type="checkbox" ng-model="search.name" />
<input type="checkbox" ng-model="search.value" />
<input type="checkbox" ng-model="search.category" />

在我的控制器中：

$scope.search = {name: true, value: true,category: true};

这根本不显示任何项目。但是我需要通过不同的字段过滤项目，动态更改搜索属性（并将它们组合成不同的变体）

这怎么可能？

Answer 1

search 必须是一个 function()，它会通过 $scope 来查看复选框的值。

在你的控制器中声明类似这样的东西

$scope.customFilter = function (item) {
    if (!$scope.search.$ || (!$scope.search.value && !$scope.search.name)) {// your input field is empty or no checkbox checked
        return true;
    }

    var searchVal = $scope.search.$;
    searchVal = searchVal.replace(/([()[{*+.$^\\|?])/g, '\\$1'); //special char

    var regex = new RegExp('' + searchVal, 'i');

    var matchOnValue = false, matchOnName= false; 

    if ($scope.search.value) {
       matchOnValue = regex.test(item.value);
    }
    if ($scope.search.name) {
       matchOnName = regex.test(item.name);
    }
    return matchOnValue || matchOnName;
}

所以在你的模板中使用它

<div ng-repeat="item in items|filter:customFilter">
   {{item.name}} – {{item.value}}
</div>

Plnkr Here

Answer 2

请看下面的示例

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

app.controller('fCtrl', function($scope) {

  $scope.items = [{
    'name': 'apple',
    value: 'yellow'
  }, {
    name: 'prune',
    value: 'red'
  }, {
    'name': 'red ',
    value: 'apple'
  }];


  $scope.name = false;
  $scope.value = false;

  $scope.filter = "$";
  $scope.search = {
    name: '',
    value: '',
    $: ''
  };
  $scope.changeFilterTo = function(pr) {

   
    $scope.filter = pr;
    $scope.search = {
      name: '',
      value: '',
      $: ''
    };
  }


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="fCtrl">
    <input type="text" ng-model="search[filter]">by {{filter}}
    <input type="radio" name="search" ng-click="changeFilterTo('name')" />Name
    <input type="radio" name="search" ng-click="changeFilterTo('value')" />Value
    <input type="radio" name="search" ng-click="changeFilterTo('$')" />$
    <div ng-repeat="item in items|filter:search">
      {{item.name}} – {{item.value}}
    </div>
  </div>
</div>