Angular filter with select tag and input value
javascript:
var app = angular.module('appX', []);
app.controller('ctrlX', function($scope) {
$scope.dataSet = [{
firstname: 'first 1',
lastname: 'last 1',
age: '24',
sex: 'F'
}, {
firstname: 'first 2',
lastname: 'last 2',
age: '21',
sex: 'M'
}, {
firstname: 'first 3',
lastname: 'last 3',
age: '24',
sex: 'M'
}, {
firstname: 'first 4',
lastname: 'last 4',
age: '26',
sex: 'F'
}];
$scope.keyList = [];
angular.forEach($scope.dataSet, function(val, key) {
angular.forEach(val, function(v, k) {
if ($scope.keyList.indexOf(k) < 0) {
$scope.keyList.push(k);
}
})
})
})
app.filter('mycustomSearch', function() {
return function(input, option) {
if (!option.type || !option.term) {
return input;
}
var result = [];
angular.forEach(input, function(val, key) {
if (val[option.type].indexOf(option.term) > -1) {
result.push(val);
}
})
return result;
}
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="appX"> <div ng-controller="ctrlX"> <label>Search:</label> <input id='searchTerm' ng-model='searchTerm' /> <label>Filter:</label> <select id='filterKey' ng-model="filterList" ng-options="x for x in keyList"> <option value=''>ALL</option> </select> <div> <table> <thead> <tr> <th ng-repeat="x in keyList">{{x}}</th> </tr> </thead> <tbody> <tr ng-repeat="x in dataSet | mycustomSearch:{term:searchTerm, type:filterList} | filter: searchTerm"> <td>{{x.firstname}}</td> <td>{{x.lastname}}</td> <td>{{x.age}}</td> <td>{{x.sex}}</td> </tr> </tbody> </table> </div> </div> </div>
Comments
Post a Comment