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.$" />

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

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

<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

搜索必须是一个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>

在这里

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>