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

标签 javascript angularjs html angularjs-ng-repeat

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

单击时,我想过滤 ng-repeat 数据,以便返回使用 'xyz''pqr' 过滤后的 JSON 数据'abc'

ng-repeat="flt_det 中的数据 | 过滤器:某些内容"

提前致谢。

最佳答案

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

关于javascript - angularjs ng-repeat过滤器基于点击时的数组值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29417989/

相关文章:

javascript - 更改放置在模态页脚中的按钮的任务

javascript - 是否可以为我使用 Safari 访问的某个特定网站运行 JavaScript

javascript - 在 Angular Controller 中定义常量的最佳方法是什么?

javascript - Svelte 构建初始渲染到 index.html 文件

javascript - 如何使用javascript选择最里面的div元素

javascript - 在 SharePoint CSOM 中关闭 showWaitScreenWithNoClose

javascript - 使用javascript在两端 trim 字符串

javascript - 在 AngularJS 中加载部分 html 文件

html - CSS滑入滑出动画溢出问题

javascript - 为什么绝对定位忽略顶部填充而不是左侧填充?