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>
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:
No comments:
Post a Comment