Simple Table Search Filter Using AngularJS

MrVirgin · 2025-02-27T05:12:16+0000

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!!

Download

You must upgrade your account or reply in the thread to view the hidden content.

Simple Table Search Filter Using AngularJS

More options

MrVirgin

452,292

324,242

324,250