angularjs ng基于点击时的数组值重复过滤器

angularjs ng-repeat filter based on array values on click

本文关键字：过滤器 数组 ng 于点击 angularjs      更新时间：2023-09-26

我有一个数组$scope.something = ['xyz','abc','pqr'];

点击后，我想过滤ng-repeat数据，这样它将返回用'xyz'、'pqr'和'abc'过滤的JSON数据。

ng-repeat="data in flt_det | filter:something"。

提前谢谢。

如果您想用$scope.something中的任何匹配元素过滤数据，那么您可能需要创建一个自定义过滤器：

app.filter("somethingFilter", function() {
   return function(array, something) {
     return array.filter(function(ele) {
          return (something.indexOf(ele) > 0)
      });
   }
});

现在在您的HTML中，

ng-repeat="data in flt_det | filter:something".

如果数据存在于something数组中，这将过滤flt_det。

点击按钮？

$scope.buttonClickHandler = function() {
     $scope.flt_det = $scope.flt_det.filter(function(ele) {
                               return ($scope.something.indexOf(ele) > 0)
                        });
}

这将在单击按钮时更新$scope.flt_det数据。

在这种情况下，您甚至可以使用$filter：

app.controller("myCtrl", function($scope, $filter)
{
    $scope.buttonClickHandler = function() {
        $scope.flt_det = $filter('somethingFilter')($scope.flt_det,$scope.something);
    };
});

编辑演示

angular.module("app",[])
.controller("MainCtrl", function($scope) {
 $scope.flt_det = ["abc", "pqr", "sdfs", "sdfds", "xyz"];
 $scope.something = ["abc", "pqr", "xyz"];
 $scope.buttonClickHandler = function() {
  $scope.flt_det = $scope.flt_det.filter(function(ele) {
        return ($scope.something.indexOf(ele) > 0)
     });
  }
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="data in flt_det">
   {{data}}
</div>
<button type="button" ng-click="buttonClickHandler()">Filter data</button>
</body>
</html>

编辑：修复了使用数组输入进行过滤的问题

如果你想在控制器中使用内置的Angular过滤器而不是自定义过滤器，另一个选择是这样做（使用JSFiddle）：

$scope.filtered = [];
    for(var index = 0; index < $scope.something.length; index++) {
      var singleFilter = $filter('filter')($scope.flt_det, $scope.something[index]);
      $scope.filtered = _.union($scope.filtered, singleFilter);
    }

这将维护一个单独的$scope.filtered数组。它还利用了Underscore.js的并集函数。然后你的html会像这样：

ng-repeat="data in filtered"

有关在控制器中使用过滤器的信息，请参阅此处的Angular文档：https://docs.angularjs.org/api/ng/filter/filter

相关文章：