This demo shows how to search the table for any keyword
Instruction: Type search keyword in Search field and check the tables changing based on the search result. The details could be found on AngularJS Filtering Repeaters tutorial page. Try playing with all the functions such as add, remove and search.
Search
Name Employees Head Office Action
{{company.name}} {{company.employees}} {{company.headoffice}}

Add a Company

Notes

  • Filter such as "filter: searchKeyword" is applied on the value of ng-repeat directive with a pipe, "|". searchKeyword is model associated with search input textfield
Directive ng-app & ng-controller code
			
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="helloApp">
<head>
<title>Hello AngularJS - Search Table - Filter Example</title>
<link rel="stylesheet"
	href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script
	src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
	src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script
	src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="assets/js/controllers.js"></script>
</head>
<!-- Controller name goes here -->
<body ng-controller="CompanyCtrl">
...
</body>
</html>
			
			
Controller CompanyCtrl code in controller.js
			
<script>
var helloApp = angular.module("helloApp", []);
helloApp.controller("CompanyCtrl", function($scope) {
$scope.companies = [
                    { 'name':'Infosys Technologies',
                    	'employees': 125000,
                    	'headoffice': 'Bangalore'},
                    	{ 'name':'Cognizant Technologies',
	                    	'employees': 100000,
	                    	'headoffice': 'Bangalore'},
	                    	{ 'name':'Wipro',
		                    	'employees': 115000,
		                    	'headoffice': 'Bangalore'},
		                    	{ 'name':'Tata Consultancy Services (TCS)',
			                    	'employees': 150000,
			                    	'headoffice': 'Bangalore'},
			                    	{ 'name':'HCL Technologies',
				                    	'employees': 90000,
				                    	'headoffice': 'Noida'},
                    ];
$scope.addRow = function(){		
	$scope.companies.push({ 'name':$scope.name, 'employees': $scope.employees, 'headoffice':$scope.headoffice });
	$scope.name='';
	$scope.employees='';
	$scope.headoffice='';
};
$scope.removeRow = function(name){				
		var index = -1;		
		var comArr = eval( $scope.companies );
		for( var i = 0; i < comArr.length; i++ ) {
			if( comArr[i].name === name ) {
				index = i;
				break;
			}
		}
		if( index === -1 ) {
			alert( "Something gone wrong" );
		}
		$scope.companies.splice( index, 1 );		
	};
)};
</script>
			
			
Directive ng-repeat & ng-click code

Pay attention to filter keyword applied on the value of ng-repeat directive

			
<table class="table">
	<tr>
		<th>Name
		</th>
		<th>Employees
		</th>
		<th>Head Office
		</th>
		<th>Action
		</th>
	</tr>
	<tr ng-repeat="company in companies  | filter: searchKeyword ">
		<td>{{company.name}}
		</td>
		<td>{{company.employees}}
		</td>
		<td>{{company.headoffice}}
		</td>
		<td>
		<input type="button" value="Remove" class="btn btn-primary" ng-click="removeRow(company.name)"/>
		</td>
	</tr>
</table>
			
			
comments powered by Disqus