I am here to continue the discussion around AngularJS. Today, we will discuss about the form data binding with Angular JS. Also in case you have not had a look at our previous articles of this series, go through the following links:

In this article, we will discuss how to perform AngularJS data binding technique with the HTML form elements or controls.

Using Data Binding Directives

The first category of built-in directives is responsible for performing data binding, which is one of the features that elevates AngularJS from a template package into a full-fledged application development framework. Data binding uses values from the model and inserts into the HTML elements.

Directive

Applied

As Description

ng-bind

Attribute, class

Binds the innerText property of an HTML element.

ng-bind-html

Attribute, class

Creates data bindings using the innerHTML property of an HTML element. This is potentially dangerous because it means that the browser will interpret the content as HTML, rather than content.

ng-bind-template

Attribute, class

Similar to the ng-bind directive but allows for multiple template expressions to be specified in the attribute value.

ng-model

Attribute, class

Creates a two-way data binding.

One way Binding

AngularJS supports two kinds of data binding. The first, one-way binding, means a value is taken from the data model and inserted into an HTML element. AngularJS bindings are live, which means that when the value associated with the binding is changed in the data model, the HTML element will be updated to display the new value. The ng-bind directive is responsible for creating one-way data bindings, but it is rarely used directly because AngularJS will also create this kind of binding whenever it encounters the {{ and }} characters in the HTML document. For demonstrating the one way binding concept, please check the below example.

App.js
  1. var testApp = angular.module('TestApp', []);
OneWayBind.html
  1. <!DOCTYPE html>
  2. <html ng-app="TestApp">
  3. <head>
  4. <title>AngularJS One Way Binding</title>
  5. <script src="angular.js"></script>
  6. <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />
  7. <script src="app.js"></script>
  8. <script src="OneWayBind.js"></script>
  9. </head>
  10. <body ng-controller="OneWayCtrl">
  11. <div id="todoPanel" class="panel">
  12. <h3 class="panel-header">To Do List</h3>
  13. <div>There are {{todos.length}} items</div>
  14. <div>
  15. There are <span ng-bind="todos.length"></span> items
  16. </div>
  17. <div ng-bind-template="First: {{todos[0].action}}. Second: {{todos[1].action}}">
  18. </div>
  19. <div ng-non-bindable>
  20. AngularJS uses {{ and }} characters for templates
  21. </div>
  22. </div>
  23. </body>
  24. </html>
OneWayBind.js
  1. testApp.controller("OneWayCtrl", function ($scope) {
  2. $scope.todos = [
  3. { action: "Get groceries", complete: false },
  4. { action: "Call plumber", complete: false },
  5. { action: "Buy running shoes", complete: true },
  6. { action: "Buy flowers", complete: false },
  7. { action: "Call family", complete: false }];
  8. });
The output of the above program is as below,


Two-Way Data Bindings

Two-way data bindings tracks changes in both directions, allowing elements that gather data from the user to modify the state of the application. Two-way bindings are created with the ng-model directive, and a single data model property can be used for both one- and two-way bindings. For demonstrating this concept, below code works great:

TwoWayBind.html
  1. <!DOCTYPE html>
  2. <html ng-app="TestApp">
  3. <head>
  4. <title>AngularJS Two Way Binding</title>
  5. <script src="angular.js"></script>
  6. <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />
  7. <script src="app.js"></script>
  8. <script src="TwoWayBind.js"></script>
  9. </head>
  10. <body ng-controller="TwoWayCtrl">
  11. <div id="todoPanel" class="panel">
  12. <h3 class="panel-header">To Do List</h3>
  13. <div class="well">
  14. <div>The first item is: {{todos[0].action}}</div>
  15. </div>
  16. <div class="form-group well">
  17. <label for="firstItem">Set First Item:</label>
  18. <input name="firstItem" class="form-control" ng-model="todos[0].action" />
  19. </div>
  20. </div>
  21. </body>
  22. </html>
TwoWayBind.js
  1. testApp.controller("TwoWayCtrl", function ($scope) {
  2. $scope.todos = [
  3. { action: "Get groceries", complete: false },
  4. { action: "Call plumber", complete: false },
  5. { action: "Buy running shoes", complete: true },
  6. { action: "Buy flowers", complete: false },
  7. { action: "Call family", complete: false }];
  8. });
The output of the above example is,

Using the Template Directives

Data bindings are the core feature of AngularJS views, but on their own they are pretty limited. Web applications—or any kind of application for that matter—tend to operate on collections of similar data objects and vary the view they present to the user based on different data values. Fortunately, AngularJS includes a set of directives that can be used to generate HTML elements using templates, making it easy to work with data collections and to add basic logic to a template that responds to the state of the data. I have summarized the template directives as below –

Directive

Applied

As Description

ng-cloak

Attribute, class

Applies a CSS style that hides inline binding expressions, which can be briefly visible when the document first loads

ng-include

Element, attribute,

class

Loads, processes, and inserts a fragment of HTML into the Document Object Model

ng-repeat

Attribute, class

Generates new copies of a single element and its contents for each object in an array or property on an object

ng-switch

Element, attribute

Changes the elements in the Document Object Model based on the value

of data bindings

ng-if

Attribute

Adds and removes elements from the DOM

ng-class

Attribute, class

Sets the class attribute for an element

ng-class-even

Attribute, class

Sets the class attribute for even-numbered elements generated within the

ng-repeat directive

ng-class-odd

Attribute, class

Sets the class attribute for odd-numbered elements generated within the

ng-repeat directive

ng-hide

Attribute, class

Shows and hides elements in the DOM

ng-show

Attribute, class

Shows and hides elements in the DOM

ng-style

Attribute, class

Sets one or more CSS properties
Demonstrate of ng-repeat

Html file code
  1. <!DOCTYPE html>
  2. <html ng-app="TestApp">
  3. <head>
  4. <title>AngularJS Ng Class</title>
  5. <script src="angular.js"></script>
  6. <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />
  7. <script src="app.js"></script>
  8. <script src="OtherBind.js"></script>
  9. <style>
  10. .odd {
  11. background-color: lightcoral;
  12. }
  14. .even {
  15. background-color: lavenderblush;
  16. }
  17. </style>
  18. </head>
  19. <body ng-controller="OtherBindCtrl">
  20. <div id="todoPanel" class="panel">
  21. <h3 class="panel-header">To Do List</h3>
  22. <table class="table">
  23. <thead>
  24. <tr>
  25. <th>Srl No</th>
  26. <th>Action</th>
  27. <th>Done</th>
  28. </tr>
  29. </thead>
  30. <tbody>
  31. <tr ng-repeat="item in todos" ng-class="$odd ? 'odd' : 'even'">
  32. <td>{{$index + 1}}</td>
  33. <td>{{item.action}}</td>
  34. <td>{{item.complete}}</td>
  35. </tr>
  36. </tbody>
  37. </table>
  38. </div>
  39. </body>
  40. </html>
Angular Js Controller file
  1. testApp.controller("OtherBindCtrl", function ($scope) {
  2. $scope.todos = [
  3. { action: "Get groceries", complete: false },
  4. { action: "Call plumber", complete: false },
  5. { action: "Buy running shoes", complete: true },
  6. { action: "Buy flowers", complete: false },
  7. { action: "Call family", complete: false }];
  8. });
The output of the above program is as below,

Demonstrate of ngInclude
Main html file code
  1. <!DOCTYPE html>
  2. <html ng-app="TestApp">
  3. <head>
  4. <title>AngularJS ngInclude</title>
  5. <script src="angular.js"></script>
  6. <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />
  7. <script src="app.js"></script>
  8. <script src="OtherBind2.js"></script>
  9. </head>
  10. <body ng-controller="OtherBindCtrl">
  11. <div id="todoPanel" class="panel">
  12. <h3 class="panel-header">To Do List</h3>
  13. <div class="well">
  14. <div class="checkbox">
  15. <label>
  16. <input type="checkbox" ng-model="showList">
  17. Use the list view
  18. </label>
  19. </div>
  20. </div>
  21. <ng-include src="viewFile()"></ng-include>
  22. </div>
  23. </body>
  24. </html>
AngularJs Controller file
  1. testApp.controller("OtherBindCtrl", function ($scope) {
  2. $scope.todos = [
  3. { action: "Get groceries", complete: false },
  4. { action: "Call plumber", complete: false },
  5. { action: "Buy running shoes", complete: true },
  6. { action: "Buy flowers", complete: false },
  7. { action: "Call family", complete: false }];
  9. $scope.viewFile = function () {
  10. return $scope.showList ? "list.html" : "table.html";
  11. };
  12. });
Now, as per the above code when view file method executes, it either returns list.html or table.html file as return value. For this, we need to create first this html file.
list.html
  1. <ol>
  2. <li ng-repeat="item in todos">
  3. {{item.action}}
  4. <span ng-if="item.complete"> (Done)</span>
  5. </li>
  6. </ol>
Table.html
  1. <table class="table">
  2. <thead>
  3. <tr>
  4. <th>#</th>
  5. <th>Action</th>
  6. <th>Done</th>
  7. </tr>
  8. </thead>
  9. <tr ng-repeat="item in todos" ng-class="$odd ? 'odd' : 'even'">
  10. <td>{{$index + 1}}</td>
  11. <td ng-repeat="prop in item">{{prop}}</td>
  12. </tr>
  13. </table>
The output of the program as follows,
Demonstrate the ngSwitch
Html file code
  1. <!DOCTYPE html>
  2. <html ng-app="TestApp">
  3. <head>
  4. <title>AngularJS ngSwitch</title>
  5. <script src="angular.js"></script>
  6. <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />
  7. <script src="app.js"></script>
  8. <script src="OtherBind3.js"></script>
  9. </head>
  10. <body ng-controller="OtherBindCtrl">
  11. <div id="todoPanel" class="panel">
  12. <h3 class="panel-header">To Do List</h3>
  13. <div class="well">
  14. <div class="radio" ng-repeat="button in ['None', 'Table', 'List']">
  15. <label>
  16. <input type="radio" ng-model="data.mode" value="{{button}}" ng-checked="$first" />
  17. {{button}}
  18. </label>
  19. </div>
  20. </div>
  21. <div ng-switch on="data.mode">
  22. <div ng-switch-when="Table">
  23. <table class="table">
  24. <thead>
  25. <tr><th>#</th><th>Action</th><th>Done</th></tr>
  26. </thead>
  27. <tr ng-repeat="item in todos" ng-class="$odd ? 'odd' : 'even'">
  28. <td>{{$index + 1}}</td>
  29. <td ng-repeat="prop in item">{{prop}}</td>
  30. </tr>
  31. </table>
  32. </div>
  33. <div ng-switch-when="List">
  34. <ol>
  35. <li ng-repeat="item in todos">
  36. {{item.action}}<span ng-if="item.complete"> (Done)</span>
  37. </li>
  38. </ol>
  39. </div>
  40. <div ng-switch-default>
  41. Select another option to display a layout
  42. </div>
  43. </div>
  44. </div>
  45. </body>
  46. </html>
Angular Js File
  1. testApp.controller("OtherBindCtrl", function ($scope) {
  3. $scope.data = {};
  5. $scope.todos = [
  6. { action: "Get groceries", complete: false },
  7. { action: "Call plumber", complete: false },
  8. { action: "Buy running shoes", complete: true },
  9. { action: "Buy flowers", complete: false },
  10. { action: "Call family", complete: false }];
  12. $scope.viewFile = function () {
  13. return $scope.showList ? "list.html" : "table.html";
  14. };
  15. });
The output of the above code as below,
Demonstrate the ngClass and ngStyle
Html file code
  1. <!DOCTYPE html>
  2. <html ng-app="TestApp">
  3. <head>
  4. <title>AngularJS ngClass and ngStyle</title>
  5. <script src="angular.js"></script>
  6. <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />
  7. <script src="app.js"></script>
  8. <script src="OtherBind4.js"></script>
  9. <style>
  10. tr.Red {
  11. background-color: lightcoral;
  12. }
  14. tr.Green {
  15. background-color: lightgreen;
  16. }
  18. tr.Blue {
  19. background-color: lightblue;
  20. }
  21. </style>
  22. </head>
  23. <body ng-controller="OtherBindCtrl">
  24. <div id="todoPanel" class="panel">
  25. <h3 class="panel-header">To Do List</h3>
  26. <div class="row well">
  27. <div class="col-xs-6" ng-repeat="(key, val) in settings">
  28. <h4>{{key}}</h4>
  29. <div class="radio" ng-repeat="button in buttonNames">
  30. <label>
  31. <input type="radio" ng-model="settings[key]"
  32. value="{{button}}">{{button}}
  33. </label>
  34. </div>
  35. </div>
  36. </div>
  37. <table class="table">
  38. <thead>
  39. <tr><th>#</th><th>Action</th><th>Done</th></tr>
  40. </thead>
  41. <tr ng-repeat="item in todos" ng-class="settings.Rows">
  42. <td>{{$index + 1}}</td>
  43. <td>{{item.action}}</td>
  44. <td ng-style="{'background-color': settings.Columns}">
  45. {{item.complete}}
  46. </td>
  47. </tr>
  48. </table>
  49. </div>
  50. </body>
  51. </html>
Angular JS code
  1. testApp.controller("OtherBindCtrl", function ($scope) {
  3. $scope.todos = [
  4. { action: "Get groceries", complete: false },
  5. { action: "Call plumber", complete: false },
  6. { action: "Buy running shoes", complete: true },
  7. { action: "Buy flowers", complete: false },
  8. { action: "Call family", complete: false }];
  10. $scope.buttonNames = ["Red", "Green", "Blue"];
  12. $scope.settings = {
  13. Rows: "Red",
  14. Columns: "Green"
  15. };
  16. });
The output of the above code is as below,

Demonstrate how to bind html form with angular js
Html file code
  1. <!DOCTYPE html>
  2. <html ng-app="TestApp">
  3. <head>
  4. <title>AngularJS Forms</title>
  5. <script src="angular.js"></script>
  6. <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />
  7. <script src="app.js"></script>
  8. <script src="Forms.js"></script>
  10. </head>
  11. <body ng-controller="FormsCtrl">
  12. <div id="todoPanel" class="panel">
  13. <h3>
  14. To Do List -
  15. <span class="label label-info">
  16. {{ (todos | filter: {complete: 'false'}).length}}
  17. </span>
  18. </h3>
  19. <br />
  20. <div class="row">
  21. <div class="col-xs-6">
  22. <div class="well">
  23. <div class="form-group row">
  24. <label for="actionText">Action:</label>
  25. <input id="actionText" class="form-control" ng-model="newTodo.action">
  26. </div>
  27. <div class="form-group row">
  28. <label for="actionLocation">Location:</label>
  29. <select id="actionLocation" class="form-control" ng-model="newTodo.location">
  30. <option>Home</option>
  31. <option>Office</option>
  32. <option>Mall</option>
  33. </select>
  34. </div>
  35. <button class="btn btn-primary btn-block"
  36. ng-click="addNewItem(newTodo)">
  37. Add
  38. </button>
  39. </div>
  40. </div>
  41. <div class="col-xs-6">
  42. <table class="table">
  43. <thead>
  44. <tr><th>#</th><th>Action</th><th>Done</th></tr>
  45. </thead>
  46. <tr ng-repeat="item in todos">
  47. <td>{{$index + 1}}</td>
  48. <td>{{item.action}}</td>
  49. <td>
  50. <input type="checkbox" ng-model="item.complete">
  51. </td>
  52. </tr>
  53. </table>
  54. </div>
  55. </div>
  56. </div>
  57. </body>
  58. </html>
Angular Js Code
  1. testApp.controller("FormsCtrl", function ($scope) {
  3. $scope.todos = [
  4. { action: "Get groceries", complete: false },
  5. { action: "Call plumber", complete: false },
  6. { action: "Buy running shoes", complete: true },
  7. { action: "Buy flowers", complete: false },
  8. { action: "Call family", complete: false }];
  10. $scope.addNewItem = function (newItem) {
  11. $scope.todos.push({
  12. action: newItem.action + " (" + newItem.location + ")",
  13. complete: false
  14. });
  15. };
  16. });
The output of the program is as below,