Click here to Skip to main content
15,867,568 members
Articles / Web Development / HTML
Tip/Trick

Simple Profile Search using AngularJS

Rate me:
Please Sign up or sign in to vote.
4.27/5 (6 votes)
18 Oct 2013CPOL2 min read 36.9K   5   1
This tip will help beginners to understand basic data-binding of model-view using AngularJS.

Introduction

This tip will help the beginners of AngularJS to understand the basic data-binding of model-view using AngularJS.

AngularJS is a JavaScript framework with MVC capability. It is very helpful to develop single page applications.

Background

I need to bind the list of profiles (JSON) objects to a table. I should be able to add an item to the list and search an item in the list.

Reference: http://angularjs.org/

Using the Code

Create an empty website in Visual Studio. Add a new HTML file as Default.html.

Download AngularJS from here and bootstrap CSS from here.

Link the above JS and CSS file in the HTML.

AngularJS will help to bind the list of objects to a table.

Set the controller to a div where we are going to display the content using ng-controller, as below:

  • ng-controller - Specifies a JavaScript controller class that evaluates HTML expressions:
    JavaScript
    <div ng-controller="ProfileListCtrl"></div>  

    Create the controller function with a variable which can hold the list of Profile objects as below:

    JavaScript
    function ProfileListCtrl($scope) {
        $scope.profilelist = [
             new Profile(1, "Mark", "Brunner", 
             "Mark.Brunner@testemail.com", "0999999999") ] ;} 

    Loop through each object in the profileList using ng-repeat and construct the rows and cells based on the profile objects in the list. To implement the search, create a textbox which should bind to a model search using ng-model. Use the search model to filter the list based on the data entered in the text field as below:

  • ng-repeat - Instantiate an element once per item from a collection.
  • ng-model - Allows two-way data binding between the view and the scope.
JavaScript
<p>
      Search: <input type="text" ng-model="search">
      </p>
   <table class="table table-bordered">
      <tr ng-repeat="Profile in profilelist | filter:search" >
          <td class="tdCenter"> <span">{{Profile.FirstName}}</span></td>
          <td class="tdCenter"> <span">{{Profile.LastName}}</span></td>
          <td class="tdCenter"> <span">{{Profile.Email}}</span></td>
          <td class="tdCenter"> <span">{{Profile.Mobile}}</span></td>
      </tr>
     </table>

To add a profile object to the list, create a form with input text control for each field with the corresponding model variable as below.

Set the function to handle the submit event for add button in the form using ng-summit.

HTML
     <form ng-submit="addToList()">
<table>
            <tr>
                <td>First name:</td><td><input type="text" 
                ng-model="profileFirstName"  size="50" ></td>
                <td>Last name:</td><td><input type="text" 
                ng-model="profileLastName"  size="50" ></td>
            </tr>
            <tr>
                <td>Email :</td><td><input type="text" 
                ng-model="profileEmail"  size="50" ></td>
                <td>Mobile:</td><td><input type="text" 
                ng-model="profileMobile"  size="50" ></td>
            </tr>
         </table>       
      <div > Please search the list to check the newly added item 
      <input class="btn-primary" type="submit" 
      value="add"></div>
      </form>  

Any value entered in the controls will be available in the corresponding model variable. We can use those variables to create a new profile object and to add it in the list.

JavaScript
$scope.addToList = function () { 

        var id = $scope.profilelist.length + 1;
        $scope.profilelist.push(new Profile(id, $scope.profileFirstName, 
        $scope.profileLastName, $scope.profileEmail, $scope.profileMobile));
        $scope.profileFirstName = '';
        $scope.profileLastName = '';
        $scope.profileEmail = '';
        $scope.profileMobile = '';
       
    }; 

Clearing the variables (model) will clear the corresponding controls.

Here is the Default.html:

HTML
<!DOCTYPE html>
<html ng-app>
<head>
    <title>Profile List</title>
    <script src="js/angular.min.js"></script>
    <script src="js/Profile.js" type="text/javascript"></script>
    <script src="js/ProfileList.js" type="text/javascript"></script>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="css/bootstrap-min.css" rel="stylesheet" type="text/css"/>  

</head>
<body>
 <p class="text-info">
    Welcome to the Profile Search.<br />   
</p>
     <div ng-controller="ProfileListCtrl">
       <form ng-submit="addToList()">
        <table>
            <tr>
                <td>First name:</td><td><input type="text" 
                ng-model="profileFirstName"  size="50" ></td>
                <td>Last name:</td><td><input type="text" 
                ng-model="profileLastName"  size="50" ></td>
            </tr>
            <tr>
                <td>Email :</td><td><input type="text" 
                ng-model="profileEmail"  size="50" ></td>
                <td>Mobile:</td><td><input type="text" 
                ng-model="profileMobile"  size="50" ></td>
            </tr>
         </table>       
      <div > Please search the list to check the newly added item 
      <input class="btn-primary" type="submit" 
      value="add"></div>
      </form>
         <p>
        Search: <input type="text" ng-model="search">
        </p>
     <table class="table table-bordered">
        <tr ng-repeat="Profile in profilelist | filter:search" >
            <td class="tdCenter"> 
            <span">{{Profile.FirstName}}</span></td>
            <td class="tdCenter"> 
            <span">{{Profile.LastName}}</span></td>
            <td class="tdCenter"> 
            <span">{{Profile.Email}}</span></td>
            <td class="tdCenter"> 
            <span">{{Profile.Mobile}}</span></td>        
        </tr>
       </table>
    </div>
</body>
</html>

Create a model Profile in Profile.js:

JavaScript
 function Profile(ProfileID, FirstName, LastName, Email, Mobile) {
    this.ProfileID = ProfileID;
    this.FirstName = FirstName;
    this.LastName = LastName;
    this.Email = Email; 
    this.Mobile = Mobile; 
} 

Create a controller script in ProfileList.js as shown below:

JavaScript
function ProfileListCtrl($scope) {
    $scope.profilelist = [
         new Profile(1, "Mark", "Brunner", 
         "Mark.Brunner@testemail.com", "0999999999"),
         new Profile(2, "Barry", "Glen", 
         "Barry.Glen@testemail.com", "0999964564"),
         new Profile(3, "Amro", "Kho", 
         "Amro.Kho@testemail.com", "0999999999"),
         new Profile(4, "Bing", "Lee", 
         "Bing.Lee@testemail.com", "099089080808"),
         new Profile(5, "Sana", "Ken", 
         "sana.ken@testemail.com", "0999999999"),
         new Profile(6, "Amit", "kanth", 
         "Amit.kanth@testemail.com", "0999777777"),
         new Profile(7, "Brett", "Lee", 
         "brett.lee@testemail.com", "0999999998"),
         new Profile(8, "Anand", "Sharma", 
         "anand.sharma@testemail.com", "0999999957"),
         new Profile(9, "klen", "mac", 
         "klen.mac@testemail.com", "0999999996"),
         new Profile(10, "Martin", "Ken", 
         "martin.ken@testemail.com", "0999999995"),
         new Profile(11, "Vinoth", "But", 
         "vinoth.but@testemail.com", "0999999993"),
         new Profile(12, "Krishnan", "Nadar", 
         "krishnan.nadar@testemail.com", "0999999992"),
         new Profile(13, "Ragav", "Reddy", 
         "ragav.reddy@testemail.com", "0999999991"),
         new Profile(14, "ajith", "kumar", 
         "ajith.kumar@testemail.com", "0999999969"),
         new Profile(15, "kamran", "akmal", 
         "kamran.akmal@testemail.com", "0999997999"),
         new Profile(16, "Neil", "Jhonson", 
         "neil.jhonson@testemail.com", "0999998999"),
         new Profile(17, "vinay", "kumar", 
         "vinay.kumar@testemail.com", "0999994999"),
         new Profile(18, "yunus", "khan", 
         "yunus.khan@testemail.com", "0999939999"),
         new Profile(19, "ram", "patel", 
         "ram.patel@testemail.com", "0999989999"),
         new Profile(20, "kannan", "pillai", 
         "kannan.pillai@testemail.com", "0999997999"),
         new Profile(21, "karthik", "iyer", 
         "karthik.iyer@testemail.com", "0999991999"),
    ];

    $scope.addToList = function () {
        var id = $scope.profilelist.length + 1;
        $scope.profilelist.push(new Profile(id, $scope.profileFirstName, 
        $scope.profileLastName, $scope.profileEmail, $scope.profileMobile));
        $scope.profileFirstName = '';
        $scope.profileLastName = '';
        $scope.profileEmail = '';
        $scope.profileMobile = '';
       
    };
} 

Test the HTML page and check the search and add functionality.

Points of Interest

In this, we can get the list of profile (JSON) from profile service and bind it to the view. Also, we can implement edit functionality, currently it has only search and create profile.

Reference

History

  • Initial draft version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
Australia Australia
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionTable doesn't display any values Pin
Member 1095375117-Jul-14 6:13
Member 1095375117-Jul-14 6:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.