Setzen Sie einen benutzerdefinierten Winkelfilter zurück, wenn Sie auf die Schaltfläche zum Zurücksetzen klicken

Question

Ich habe einen benutzerdefinierten Angular-Filter mit Kontrollkästchen erstellt und die Suchergebnisse ändern sich je nach den ausgewählten Kontrollkästchen. Ich erstelle eine Reset-Taste, die alle meine Filter zurücksetzt und ich kann mir nicht vorstellen, was ich tun soll. Ich weiß, dass ich mehr Sachen unter resetFilters Funktion hinzufügen muss, aber die Codes, die ich versuchte, funktionieren nicht. Bitte helfen Sie!

JS-Teil:

$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

Wie @charlietfl in den Kommentaren gesagt, das Modell aktualisieren und nicht die Kontrollkästchen jQuery verwenden. Zum Beispiel so etwas (nicht getestet):

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

Answer 2

Danke @charlietfl und vor allem @JanP! Ich fügte eine weitere Zeile hinzu, um alle Ergebnisse anzuzeigen, wenn auf die Schaltfläche "Zurücksetzen" geklickt wurde. Das ist was ich habe und es funktioniert perfekt.

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