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:
<div ng-controller="ProfileListCtrl"></div>
Create the controller function with a variable which can hold the list of Profile objects as below:
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.
<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.
<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.
$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:
<!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:
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:
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
