Question

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

点击后，我想过滤ng-repeat数据，以便返回使用'xyz'，'pqr'和'abc'过滤的结果JSON数据。

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

如果flt_det数组中存在数据，则会过滤something。

单击按钮？

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

编辑演示

＆＃13;

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

＆＃13;

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

＆＃13;

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的union函数。然后您的HTML将如下所示：

ng-repeat="data in filtered"

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

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

2 个答案: