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

【问题标题】：How to use AngularJS custom filter and lodash如何使用 AngularJS 自定义过滤器和 lodash
【发布时间】：2017-09-05 08:45:56
【问题描述】：

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

除了复选框条件之外，过滤器包含应用 Angular 的 filter 过滤器以始终删除一些元素。

角度应用：

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

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

上面的例子运行顺利，但是如果我从自定义过滤器中删除默认过滤器（这一行：newArray = $filter('filter')(newArray, '!4');）并重新选中复选框，_.remove 隐藏的元素将不会重新出现。

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

【问题讨论】：

它对你有用吗？
@Alexandru-IonutMihai 是的，它正在工作。抱歉回复晚了。

标签： javascript angularjs arrays angular-filters

【解决方案1】：

您必须使用_filter lodash 方法而不是_remove。

与 _.filter 不同，_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 方法以获得更lighty的解决方案。

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

【讨论】：