Menu
I have a table, textbox and dropdown. I am able to search the table data based on dropdown selection and value of textbox. But in the middle of text search, if I change the dropdown selection, all data is not loading unless I totally keydown of my textbox. But my requirement is to load all data in the middle of search also so that I can search again without refreshing the page.
Here is the code:
angular.module("myApp", [])
.controller('myController', ['$scope', function ($scope) {
$scope.employees = [
{ 'id': '001', 'name': 'Alpha', 'joinDate': '05/17/2015', 'age': 37 },
{ 'id': '002', 'name': 'Bravo', 'joinDate': '03/25/2016', 'age': 27 },
{ 'id': '003', 'name': 'Charlie', 'joinDate': '09/11/2015', 'age': 29 },
{ 'id': '004', 'name': 'Delta', 'joinDate': '09/11/2015', 'age': 19 },
{ 'id': '005', 'name': 'Echo', 'joinDate': '03/09/2014', 'age': 32 }
]
// GET JSON ARRAY HEADERS.
$scope.headers = Object.keys($scope.employees[0]);
} ]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myController">
<!--DYNAMICALLY POPULATE SELECT ELEMENT USING JSON HEADERS-->
Search By
<select ng-init="columns=headers[1]" ng-model="columns" ng-options="e for e in headers"></select>
<!--BIND THE SEARCH BOX TO THE SELECT ELEMENT-->
Search <input type="text" ng-model="search[columns]" placeholder="Enter some text to search" />
<table>
<tr>
<th>ID</th>
<th>Employee Name</th>
<th>Date of Joining</th>
<th>Age</th>
</tr>
<tr ng-repeat="emps in employees | filter : search">
<td>{{emps.id}}</td>
<td>{{emps.name}}</td>
<td>{{emps.joinDate | date : 'dd/MM/yyyy'}}</td>
<td>{{emps.age}}</td>
</tr>
</table>
</div>
</body>
448
This can be handled easily by using ng-change in select tag. Update the code with latest changes
angular.module("myApp", [])
.controller('myController', ['$scope', function ($scope) {
$scope.employees = [
{ 'id': '001', 'name': 'Alpha', 'joinDate': '05/17/2015', 'age': 37 },
{ 'id': '002', 'name': 'Bravo', 'joinDate': '03/25/2016', 'age': 27 },
{ 'id': '003', 'name': 'Charlie', 'joinDate': '09/11/2015', 'age': 29 },
{ 'id': '004', 'name': 'Delta', 'joinDate': '09/11/2015', 'age': 19 },
{ 'id': '005', 'name': 'Echo', 'joinDate': '03/09/2014', 'age': 32 }
]
// GET JSON ARRAY HEADERS.
$scope.headers = Object.keys($scope.employees[0]);
$scope.changeFilterTo = function(pr) {
if ($scope.search) {
//var value = "";
for (var key in $scope.search) {
if ($scope.search[key]) {
//value = angular.copy($scope.search[key]);
$scope.search[key] = undefined;
}
}
//$scope.search[pr] = value;
}
}
} ]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myController">
<!--DYNAMICALLY POPULATE SELECT ELEMENT USING JSON HEADERS-->
Search By
<select ng-init="columns=headers[1]" ng-model="columns" ng-options="e for e in headers" ng-change="changeFilterTo(columns)"></select>
<!--BIND THE SEARCH BOX TO THE SELECT ELEMENT-->
Search <input type="text" ng-model="search[columns]" placeholder="Enter some text to search" />
<table>
<tr>
<th>ID</th>
<th>Employee Name</th>
<th>Date of Joining</th>
<th>Age</th>
</tr>
<tr ng-repeat="emps in employees | filter : search">
<td>{{emps.id}}</td>
<td>{{emps.name}}</td>
<td>{{emps.joinDate | date : 'dd/MM/yyyy'}}</td>
<td>{{emps.age}}</td>
</tr>
</table>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
