angularjs ng-repeat 过滤器基于点击时的数组值

Question

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

单击时，我想过滤 ng-repeat 数据，以便 return 结果 JSON 数据用 'xyz'、'pqr' 过滤，和 'abc'。

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

提前致谢。

Answer 1

如果您想使用 $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。

ON click of a button?

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

EDIT DEMO

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>

Answer 2

编辑：已修复以解决使用数组输入过滤的问题

如果你想在控制器中使用内置 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

angularjs ng-repeat 过滤器基于点击时的数组值

angularjs ng-repeat filter based on array values on click

html

javascript

angularjs

angularjs-ng-repeat