Wie benutze ich AngularJS benutzerdefinierten Filter und lodash

Question

Using Angular v1.5.8 mit lodash. Ich habe einen benutzerdefinierten Filter für ein Array in ng-repeat eingerichtet. Ich habe auch ein Kontrollkästchen, wenn es aktiviert ist, wird der Filter ein bestimmtes Element aus dem ng-repeat entfernen und wenn dieses Kontrollkästchen nicht aktiviert ist, wird dieses Element wieder zu dem ng-repeat hinzugefügt.

Neben der Checkbox-Bedingung enthält der Filter den Winkel filter von angular, um immer einige Elemente zu entfernen.

Die Winkel app:

angular.module('app', []) 

.controller('appCtrl', ['$scope', 
    function($scope) { 
    $scope.newArray = [1,2,3,4,5]; 
    }]) 

.filter('simpleFilter', function($filter){ 
    return function(newArray,checked){ 
    newArray = $filter('filter')(newArray, '!4'); 

    if(checked){ 
     _.remove(newArray, function(elem){ 
     return elem == 2; 
    }); 
    } 
    return newArray; 
    } 
}); 

und die HTML:

<div ng-app="app"> 
<div ng-controller="appCtrl"> 

    <span ng-repeat="el in newArray | simpleFilter:obj.checked"> 
    {{el}} 
    </span> 
<hr> 
    <input type="checkbox" ng-model="obj.checked"> 

    </div> 
</div> 

Das obige Beispiel reibungslos arbeiten, aber wenn ich die Standard-Filter aus dem benutzerdefinierten Filter entfernen (diese Zeile: newArray = $filter('filter')(newArray, '!4');) und Wenn das Kontrollkästchen erneut aktiviert ist, wird das durch _.remove verborgene Element nicht mehr angezeigt. Hier

ist die Frage: https://codepen.io/neptune01/pen/rzbLmp

Answer 1

Sie haben _filter lodash Methode zu verwenden, statt _remove.

Im Gegensatz _.filter, _remove Methode mutiert ursprünglichen Array.

angular.module('app', []) 
.controller('appCtrl', ['$scope', 
    function($scope) { 
    $scope.newArray = [1,2,3,4,5]; 
    }]) 
.filter('simpleFilter', function($filter){ 
    return function(newArray,checked){ 
    //newArray = $filter('filter')(newArray, '!4'); 
    if(checked){ 
     newArray=_.filter(newArray, function(elem){ 
     return elem != 2; 
    }); 
    } 
    return newArray; 
    } 
}); 

Hier ist working solution.

Sie auch $filter Methode verwenden können, um eine lighty Lösung zu erhalten.

if(checked) 
    newArray = $filter('filter')(newArray, '!2'); 
return newArray;