Simple Table Search Filter Using AngularJS

Submitted by razormist on Wednesday, January 25, 2017 - 18:22.

In this tutorial, we will create a Simple Table Search Filter Using AngularJS. AngularJS is a structural framework for dynamic web apps. It is a kind of template that extends HTML to a new level of coding techniques. It is mostly used by other well known site for creating a template. So let's get started. Creating the Mark-up To create a form, open any kind of text editor(notepad++, etc..) and copy/paste the code below then name it "index.html"

<!DOCTYPE hmtl>
<html lang = "en">
	<head>
		<meta charset = "UTF-8" name = "viewport" content = "width-device=width, initial-scale=1" />
		<title>Simple Search Filter Using AngularJS</title>
		<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
		<script src = "js/angular.js"></script>
		<script src = "js/script.js"></script>
	</head>
<body ng-app = "myModule">
	<nav class = "navbar navbar-default">
		<div class = "container-fluid">
			<a class = "navbar-brand" href = "https://www.sourcecodester.com">Sourcecodester</a>
		</div>
	</nav>
	<div class = "row" ng-controller = "myController">
		<div class = "col-md-3"></div>
		<div class = "col-md-6 well">
			<h3 class = "text-primary">Simple Search Filter Using AngularJS</h3>
			<hr style = "border-top:1px solid #000;"/>
			<form class="form-inline">
				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon"><span class = "glyphicon glyphicon-search"></span></div>
						<input type="text" class="form-control" id="exampleInputAmount" placeholder="Enter Here" ng-model = "search">
					</div>
				</div>
			</form>
			<table class = "table table-bordered alert-warning">
				<thead>
					<tr>
						<th>Programming Language</th>
						<th>Creator</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat = "PLang in PLangs | filter: search">
						<td>{{PLang.name}}</td>
						<td>{{PLang.creator}}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>	
</html>

The code above display the value of all the data within the AngularJS script. The ng-model will bind the data of an input then it will display the exact value in the table data. Creating a script for calling AngularJS To make the script worked, just copy/paste the code below then name it "script.js"

var myApp = angular.module("myModule", [])
									.controller("myController", function($scope){
		var PLangs = [
			{name: "C", creator: "Dennis Ritchie"},
			{name: "C++", creator: "Bjarne Stroustrup"},
			{name: "C#", creator: "Anders Hejlsberg"},
			{name: "Java", creator: "James Gosling"},
			{name: "HTML", creator: "Tim Berners-Lee"},
			{name: "Javascript", creator: "Brendan Eich"},
			{name: "PHP", creator: "Rasmus Lerdorf"},
			{name: "Python", creator: "Guido van Rossum"},
			{name: "Ruby", creator: "Yukihiro Matsumoto"},
			{name: "Perl", creator: "Larry Wall"},
			{name: "Scala", creator: "Martin Odersky"},
			{name: "Bash", creator: "Brian Fox"},
			{name: "Clojure", creator: "Rich Hickey"}
		];
		$scope.PLangs = PLangs;
});

The code above will generate the data that been stored in an array There you have it, we created a simple search filter by using AngularJS. I hope that this tutorial helps you to your project. For more updates and tutorials just kindly visit this site. Enjoy Coding!!

Add new comment

73 views

Simple Table Search Filter Using AngularJS

Tags

Add new comment