我正在开发一个基于角度js的文件过滤器。现在，我在根据类别和相应的子类别过滤结果时遇到了问题。如果我选择类别id = a，则还应显示分配给类别a及其后代子类别的文件。任何人请帮我解决一下。这是详细信息。 [ - 到目前为止我修复了类别过滤问题，现在问题是每当我选择下拉过滤器时它会清除并正确显示结果。请帮我修理一下。我在plunker http://plnkr.co/edit/fzOzms?p=preview ]
中更新了代码http://plnkr.co/edit/fzOzms?p=preview
<div class="filter-wrapper" ng-controller="filterCtrl">
<div class="filter-wrap">
<form action="" class="filter">
<div class="row">
<label class="control-label">{{items.transilations.keywordsearch}}</label>
<div class="input-group">
<input type="text" class="form-control" ng-model="search" ng-change="filter()" placeholder="{{items.transilations.searchkey}}">
<span class="input-group-addon" ng-click="search = ''"></span>
</div>
</div>
<div class="row">
<label class="control-label">{{items.transilations.filterbyarea}}</label>
<div class="input-group">
<custom-select ng-repeat="cat in categories track by $index" class="inline-table" style="display:table;"></custom-select>
</div>
</div>
<div class="row">
<label class="control-label">{{items.transilations.searchbytype}}</label>
<div ng-repeat="type in items.types">
<label class="control-label">
<input type="checkbox" ng-model="checkFilter[type.id]" value="{{type.id}}">
{{type.title}}
</label>
</div>
</div>
</form>
</div>
<div class="result-wrap">
<h3><span id="total-count"></span> {{items.transilations.resultsfound}}</h3>
<table id="data-results" class="results">
<thead>
<tr>
<th></th>
<th class="item-title">
<a href="" ng-click="orderByField='title'; reverseSort = !reverseSort">
{{items.transilations.tabletitle}}
<span ng-show="orderByField == 'title'">
<span ng-show="!reverseSort"><i class="fa fa-caret-up"></i></span>
<span ng-show="reverseSort"><i class="fa fa-caret-down"></i></span>
</span>
</a>
</th>
<th>
<a href="" ng-click="orderByField='size'; reverseSort = !reverseSort">
{{items.transilations.tablesize}}
<span ng-show="orderByField == 'size'">
<span ng-show="!reverseSort"><i class="fa fa-caret-up"></i></span>
<span ng-show="reverseSort"><i class="fa fa-caret-down"></i></span>
</span>
</a>
</th>
<th>
<a href="" ng-click="orderByField='fileType'; reverseSort = !reverseSort">
{{items.transilations.tabletype}}
<span ng-show="orderByField == 'fileType'">
<span ng-show="!reverseSort"><i class="fa fa-caret-up"></i></span>
<span ng-show="reverseSort"><i class="fa fa-caret-down"></i></span>
</span>
</a>
</th>
<th class="download">{{items.transilations.tabledownload}}</th>
</tr>
</thead>
<tbody>
<tr dir-paginate ="file in items.files | filter:dummyCategory | filter:byTypes | filter:search | orderBy:orderByField:reverseSort | offset:0 | itemsPerPage: pageSize" current-page="currentPage">
<td class="item-image" data-th="Image"><img class="img-thumbnail" ng-src="{{base}}{{file.imageUrl}}"></td>
<td class="item-title" data-th="{{items.transilations.tabletitle}}">{{file.title}}</td>
<td data-th="{{items.transilations.tablesize}}">{{file.size}}</td>
<td data-th="{{items.transilations.tabletype}}">{{file.fileType}}</td>
<td class="download" data-th="{{items.transilations.tabledownload}}"><a target="_blank" ng-href="http://192.168.0.207/usterch/{{file.url}}"><img src="save.png"/></a></td>
</tr>
</tbody>
</table>
</div>
<div class="other-controller">
<div class="text-center">
<dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="js/dirPagination/dirPagination.tpl.html">
</dir-pagination-controls>
</div>
</div>
</div>
app.directive("subcat", function($compile, $timeout){
return {
restrict:"A",
scope:true,
link:function(scope,element,attr){
element.bind("change",function($index){
$timeout(function(){
scope.dummyCategory.categories = [scope.dummyCategory.categories];
$(element).children('option:selected').attr('data-newVal', scope.dummyCategory.categories);
$(element).children('option:selected').attr('data-resetClear', JSON.stringify(scope.dummyCategory));
if(scope.dummyCategory.categories == null){
if($(element).parent().prev('custom-select').length){
scope.dummyCategory.categories= $(element).parent().prev('custom-select').find('option:selected').attr('data-newVal');
}
else{
scope.dummyCategory.categories="";
}
}
var newValue = scope.cat.val.filter(function(item) {
return item.id == scope.dummyCategory.categories
});
if(newValue[0] && 'input' in newValue[0]){
getVal(scope, newValue[0]);
scope.newArray({categories:scope.dummyCategory,val:newValue[0].input,index:scope.$index});
element[0].blur();
}
else{
scope.removeArray(scope.$index);
}
scope.changeCat(scope.dummyCategory);
}, 100, true);
});
}
}
});
function getVal(scope, newValue){
var testArray = {testval:newValue.input};
var tvLength = testArray.testval.length;
for(var i=0; i<tvLength; i++){
scope.dummyCategory.categories.push(testArray.testval[i].id);
if(testArray.testval[i].input){
getVal(scope, testArray.testval[i]);
}
}
return scope.dummyCategory.categories;
}
答案 0 :(得分：2)
您可以使用Angular过滤器而不是创建指令，这是一个示例：
JSON：
{
categories: [{
id: 1
name: "cat1"
}, {
id: 2
name: "cat2"
}]
files: [{
id: 1,
cat_id: 1,
name: "file1"
}, {
id: 2,
cat_id: 1,
name: "file2"
}, {
id: 3,
cat_id: 2,
name: "file3"
}, {
id: 4,
cat_id: 2,
name: "file1"
}]
}
HTML：
<div ng-app="ExampleApp" ng-controller="ExampleCtrl">
<select ng-model="cat_id" ng-options="cat.id as cat.name for cat in categories">
<option value="">Select...</option>
</select>
<select ng-model="file_id" ng-options="file.id as file.name for file in files | filter:{cat_id: cat_id}:comparator">
<option value="">Select...</option>
</select>
</div>
JS：
angular.module('ExampleApp', [])
.controller('ExampleCtrl', ['$scope', function($scope) {
$scope.comparator = function(actual, expected) {
// comparison here is '==' which is not the same as angular comparison '===', because sometimes the data type is not equal
return actual == expected;
};
}]);
当然，您可以添加适合您应用所需的过滤器。