[AngularJS]重置自定义角的筛选器,单击重置按钮时

标签: jQuery AngularJS
发布时间: 2017/4/16 11:53:26
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我已与复选框筛选自定义角和搜索结果改变根据选中的复选框。 我创建了一个重置按钮将重置我的筛选器,我不能似乎想要做什么。我知道我需要添加更多的东西,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>

解决方法 1:

像 @charlietfl 说,在评论中,更新模型和不使用 jQuery 的复选框。例如像这样 (未测试)︰

$scope.resetFilters = function(){
    angular.forEach($scope.FREE, function(value, key) {
        $scope.FREE[key].on = false;
    });
    angular.forEach($scope.YEAR, function(value, key) {
        $scope.YEAR[key].on = false;
    });
}
赞助商