按多个复选框角度过滤

Question

我有包含STATUS字段的对象数组。我需要能够按名称过滤，使用搜索字段，我还需要只显示状态为READY的项目，或仅显示状态为FAILED的项目，或状态为Failed的项目和状态为Ready的项目。我正在使用angularJs

    <div class="row btn-group form-group" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="checkbox" class="form-control" ng-model="taskVm.getStateClass.taskReady">Ready
        </label>
        <label class="btn btn-primary active">
            <input type="checkbox" ng-model="taskVm.getStateClass.taskProcessing">Processing
        </label>
        <label class="btn btn-primary active">
            <input type="checkbox" ng-model="taskVm.getStateClass.taskPending">Pending
        </label>
        <label class="btn btn-primary active">
            <input type="checkbox" ng-model="taskVm.getStateClass.taskFailed">Failed
        </label>
    </div>
    <div class="input-group stylish-input-group">
        <input type="text" class="form-control" ng-model="search.REALLOCATION_NAME" placeholder="Search">
        <span class="input-group-addon">
                <span class="glyphicon glyphicon-search"></span>
        </span>
    </div>
</div>
<ul class="tasks-list list-group">
    <li ng-repeat="task in taskVm.tasksdata | orderBy : task.ID  | filter :search | filter: taskVm.statusFilter" >

这是我的HTML。这是我的控制器：

 vm.getStateClass = {   
            taskReady: 'READY',
            taskPending: 'PENDING',
            taskFailed: 'FAILED',
            taskProcessing: 'PROCESSING'
    }

     vm.statusFilter = function (task) {
         console.log(task);
        return task.STATUS === vm.getStateClass.taskReady || 
            task.STATUS === vm.getStateClass.taskPending ||
            task.STATUS === vm.getStateClass.taskFailed ||
            task.STATUS === vm.getStateClass.taskFailed;
    };

vm是$ scope，因为我使用的是控制器As syntacsis。

搜索工作正常，但过滤根本不起作用。

Answer 1

比较将不匹配，复选框将“getStateClass”的值设置为“true”或“false”，因此您所做的比较永远不会匹配。您可以进行以下更改：

vm.getStateClass = {   
        taskReady: true,
        taskPending: true,
        taskFailed: true,
        taskProcessing: true
}

vm.statusFilter = function (task) {
     console.log(task);
    return task.STATUS === 'READY' && vm.getStateClass.taskReady || 
        task.STATUS === 'PENDING' && vm.getStateClass.taskPending ||
        task.STATUS === 'FAILED' && vm.getStateClass.taskFailed ||
        task.STATUS === 'PROCESSING' && vm.getStateClass.taskFailed;
};

angular.module("app", [])
      .controller("TaskController", TaskController);

function TaskController() {
	var vm = this;

	vm.statusFilter = statusFilter;
	vm.getStateClass = {   
            taskReady: true,
            taskPending: true,
            taskFailed: true,
            taskProcessing: true
    };
    vm.tasks = [
    	{
    		name: 'task1',
    		status: 'READY'
    	}, {
    		name: 'task2',
    		status: 'PENDING'
    	}, {
    		name: 'task3',
    		status: 'FAILED'
    	}, {
    		name: 'task4',
    		status: 'PROCESSING'
    	}
    ];

	function statusFilter(task) {
		return task.status === 'READY' && vm.getStateClass.taskReady
	           || task.status === 'PENDING' && vm.getStateClass.taskPending
	           || task.status === 'FAILED' && vm.getStateClass.taskFailed
	           || task.status === 'PROCESSING' && vm.getStateClass.taskProcessing;
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="TaskController as taskVm">
	<label class="btn btn-primary active">
        <input type="checkbox" class="form-control" ng-model="taskVm.getStateClass.taskReady">Ready
    </label>
    <label class="btn btn-primary active">
        <input type="checkbox" ng-model="taskVm.getStateClass.taskProcessing">Processing
    </label>
    <label class="btn btn-primary active">
        <input type="checkbox" ng-model="taskVm.getStateClass.taskPending">Pending
    </label>
    <label class="btn btn-primary active">
        <input type="checkbox" ng-model="taskVm.getStateClass.taskFailed">Failed
    </label>

    <div ng-repeat="task in taskVm.tasks | filter:taskVm.statusFilter">{{task.name}} - {{task.status}}</div>
</div>