代码之家  ›  专栏  ›  技术社区  ›  neptune

如何使用AngularJS自定义过滤器和lodash

  •  2
  • neptune  · 技术社区  · 7 年前

    将Angular v1.5.8与lodash一起使用。我在ng repeat中的一个数组上设置了一个自定义过滤器。我也有一个复选框,当选中时,过滤器将从ng repeat中删除某个元素,当未选中时,该元素将重新添加到ng repeat中。

    filter

    angular应用程序:

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

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

    上面的示例运行顺利,但如果我从自定义过滤器中删除默认过滤器(此行: newArray = $filter('filter')(newArray, '!4');

    问题是: https://codepen.io/neptune01/pen/rzbLmp

    1 回复  |  直到 7 年前
        1
  •  2
  •   Mihai Alexandru-Ionut    7 年前

    你必须使用 _filter lodash法代替 _remove

    不像 _.滤器 , 方法变异原始数组。

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

    这是 working solution.

    您也可以使用 $filter 方法以获得更多 解决方案

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