Question

我制作了一个带有复选框的自定义角度过滤器，搜索结果会根据所选的复选框而变化。我正在创建一个重置按钮，它将重置我的所有过滤器，我似乎无法想象该做什么。我知道我需要在resetFilters函数下添加更多东西，但我尝试的代码不起作用。请帮忙！

JS部分：

 $scope.FREEcheckChange = function(){
        for (var check4 in $scope.FREE){
            if($scope.FREE[check4].on){
                $scope.showAll4 = false;
                return;                
            }
        }
        $scope.showAll4 = true;
    }; //end of FREEcheckChange


  $scope.FREEFilter = function(f){
    if($scope.showAll4) 
        {return true;}
    var selectedBox4 = false;

    for(var i in  $scope.FREE){         
        var catFive =  $scope.FREE[i];
        if(catFive.on){
            if(f.cat.indexOf(catFive.name) == -1) {return false;}
            else {selectedBox4 = true;}
        }             
    }         

    return selectedBox4;        
}


$scope.YEARFilter = function(d){
    if($scope.showAll3) 
        {return true;}
    var selectedBox3 = false;

    for(var i in  $scope.YEAR){         
        var catFour =  $scope.YEAR[i];
        // console.log(catFour); 
        if(catFour.on){
            if(d.cat.indexOf(catFour.name) == -1) {return false;}
            else {selectedBox3 = true;}
        }             
    }         
    return selectedBox3;        
}
 $scope.resetFilters = function(){
        $('input:checkbox').removeAttr('checked'); }

HTML：

 <div ng-repeat="item in filteredProducts = ( products | filter: YEARFilter |  filter: FREEFilter | searchFilter:searchString )">

<button type="button" class="btn btn-default btn-block" style="margin: 7px 0;" ng-click="resetFilters();">RESET FILTERS</button>

<div ng-repeat= "FREEcategory in FREE">
                        <input type="checkbox" ng-model="FREEcategory.on" ng-change ="FREEcheckChange()">           
                        {{FREEcategory.name}}
                    </div>
 <div  ng-repeat= "YEARcategory in YEAR">
                    <input type="checkbox" ng-model="YEARcategory.on" ng-change ="YEARcheckChange()">           
                    {{YEARcategory.name}}
                    </div>

Answer 1

像@charlietfl在评论中所说，使用jQuery更新模型而不是复选框。例如像这样（未经测试）：

myvec

Answer 2

谢谢@charlietfl，特别是@JanP！我还添加了一行，以便在重置＆＃39;时显示所有结果。单击按钮。这就是我所拥有的，而且它的工作非常完美。

$scope.resetFilters = function(){ angular.forEach($scope.YEAR, function(value, key) { $scope.YEAR[key].on = false; $scope.showAllYEAR = true; }); angular.forEach($scope.FREE, function(value, key) { $scope.FREE[key].on = false; $scope.showAllFREE = true; }); }

单击重置按钮时重置自定义角度过滤器

2 个答案: