Sunday, February 15, 2015

Using ng-model directive with a Controller

The core functionality of ng-model directive is to provide data binding between the model and the view in AngularJS. In the previous post ng-model directive we saw on how to use the ng-model directive to bind variables which were created using the ng-init directive, in this post we shall see on how to use ng-model to directive to bind the properties defined in the controller to the view.

In the following example we declare initialize the properties FName and Lname in the $scope in the controller.


<html ng-app="modelExample">
<head>
    <meta charset="utf-8" />
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
    <script>
  angular.module('modelExample', [])
    .controller('modelController', ['$scope', function($scope) {
      $scope.FName = 'FirstName';
      $scope.LName = 'LastName';
    }]);
</script>
</head>
<body>
<div ng-controller="modelController">
First Name: <input type="text" ng-model="FName"><br/><br/>
Last Name: <input type="text" ng-model="LName"><br/><br/>
Your Name is :{{FName}}, {{LName}}
</div>
</body>

</html>

Output:


Search Flipkart Products:
Flipkart.com

No comments: