I have an array $scope.something = ['xyz','abc','pqr'];
On click, I want to filter the ng-repeat data so that it will return the resulting JSON data filtered with 'xyz', 'pqr', and 'abc'.
ng-repeat="data in flt_det | filter:something".
Thanks in advance.
if you want to filter data with any of the matching elements inside $scope.something then you may need to craete a custom filter:
app.filter("somethingFilter", function() {
return function(array, something) {
return array.filter(function(ele) {
return (something.indexOf(ele) > 0)
});
}
});
Now in your HTML,
ng-repeat="data in flt_det | filter:something".
This will filter flt_det if the data is present in something array.
ON click of a button?
$scope.buttonClickHandler = function() {
$scope.flt_det = $scope.flt_det.filter(function(ele) {
return ($scope.something.indexOf(ele) > 0)
});
}
This will update the $scope.flt_det data on click of the button.
You can even use $filter in this case as well:
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>
EDIT: Fixed to address question of filtering using the array input
Another option if you want to use the built-in Angular filters within your controller instead of a custom filter, is to do something like this (working 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);
}
This maintains a separate $scope.filtered array. It also utilizes Underscore.js's union function. Then your html will look like this:
ng-repeat="data in filtered"
See the Angular documentation here for using a filter in the controller: https://docs.angularjs.org/api/ng/filter/filter
$scope.something array to filter another array $scope.flt_det. But $filter will filter the first argument array with a primitive value which is second argument.