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

78 views