javascript - Angular 和 JS 过滤非标准复选框行为

Question

我想根据表数据创建过滤器。

过滤器应该是通用的(一对多过滤器组)并且与搜索字段混合。我有数据、基本逻辑和搜索工作，但找不到构造将返回过滤记录的函数的正确方法。所有过滤器都有 ALL 作为选项，它会在 onLoad 期间进行检查，但其余复选框保持未选中状态(客户规范)，当您检查 ALL 的过滤器选项之一时 未选中。

HTML 和 JS 代码:

$scope.checkedAll = [true, true];
	
  $scope.data.items = [
		{name: "Provider", value: 'provider_id', content: [
			{name: 'Azure VM', value: 'azure_vm', selected: false},
			{name: 'CloudForms', value: 'cloudforms', selected: false}
			// more providers of them...
		]},
		{name: "State", value: 'state_id', content: [
			{name: 'Terminated', value: 'terminated', selected: false},
			{name: 'On', value: 'on', selected: false},
			{name: 'Off', value: 'off', selected: false}
			//more states
		]}
		//more filters []
	];

  $scope.data.list = [
  {provider_id: "provider1", display_name: "name1", state_id: "on"},
  {provider_id: "provider2", display_name: "name2", state_id: "on"},
  {provider_id: "provider2", display_name: "name3", state_id: "off"},
  {provider_id: "provider2", display_name: "name4", state_id: "terminated"}
  //much more records
  ];

	$scope.optionClickedAll = function(index) {
		var checked = $scope.checkedAll[index];
		if (!checked) {
			return;
		}
		
		angular.forEach($scope.data.items[index].content, function (element) {
			element.selected = !checked;
		});
	}
	
	$scope.optionClicked = function(index, element) {
		var checked = element.selected;
		
		if (checked) {
			$scope.checkedAll[index] = false;
		}
		
	}
	
	$scope.filterSelected = function(list) {

		var result = [];
		
/*		var filterIds = [];
		var itemIds = [];
		for (var i = 0; i < $scope.data.items.length; ++i) {
			var item = $scope.data.items[i];
			for (var j = 0; j < item.content.length; ++j) {
				var value = item.content[j];
				if ($scope.checkedAll[i] || value.selected) {
					if (filterIds.indexOf(item.value) == -1) filterIds.push(item.value);
					if (itemIds.indexOf(value.value) == -1) itemIds.push(value.value);
				}
			}
		}
*/

		for (var k = 0; k < list.length; ++k) {
			// ...
		return result;
	}
}

<div class="col-md-2 ">
<div class="filters">
    <div class="search-box">
        <label class="filter-label">FILTERS</label>
        <div class="input-field">
            <input type="text" ng-model="searchInstances">
            <label class="">${Search}</label>
        </div>
    </div>
    <div ng-repeat="item in data.items">
        <label>{{item.name|uppercase}}</label>
        <div class="checkbox-group">
            <input type="checkbox" ng-click="optionClickedAll($index)" ng-model="checkedAll[$index]" id="{{item.value}}">
            <label for="{{item.value}}">All</label>
            <div ng-init="parentIndex = $index">
                <div ng-repeat="element in item.content">
                    <input class="filled-in filter-all" type="checkbox" ng-click="optionClicked(parentIndex, element)" ng-model="element.selected" id="{{element.value}}">
                    <label for="{{element.value}}">{{element.name}}</label>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-md-10 ">
    <table class="table">
        <thead>
            <tr>
                <th>Provider</th>
                <th>State</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in filterSelected(data.list) | filter:searchInstances">
                <td>{{item.provider_id}}</td>
                <td>{{item.state_id}}</td>
                <td>{{item.display_namy}}</td>
            </tr>
    </table>
</div>

可以更改$scope.data.items的结构。感谢任何建议。

Answer 1

Angular 支持自定义过滤器，这可能正是您想要的。查看 AngularJS 文档 Creating custom filters 。您还可以在那里找到一个示例。