Angular JS类别过滤器不能递归工作

Question

我正在开发一个基于 Angular js 的文件过滤器。现在我在根据类别和相应的子类别过滤结果时遇到了一个问题。如果我选择一个类别 id=a 那么分配给类别 a 及其后代子类别的文件也应该显示出来。任何人请帮我整理一下。这是详细信息。 [ -- 到目前为止，我修复了类别过滤问题，现在问题是每当我选择下拉过滤器时，它都会清除并正确显示结果。请帮我修复它。我已经更新了 plunker 中的代码 http://plnkr.co/edit/fzOzms?p=preview]

JSON

View JSON Input

http://plnkr.co/edit/fzOzms?p=preview

HTML

<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>

Angular JS 代码

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;
}

Server Link

Plunker：http://plnkr.co/edit/3YCTRsKxQ05cuy3czTIb?p=preview

Answer 1

您可以使用 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;
    };
}]);

当然，您可以根据需要添加过滤器以适合您的应用。