Description
AngularJS Model alerts the respective views and controllers when any change is made in its state. By this alert, views produces updated output, and the controllers changes set of commands that are available. A passive implementation of MVC omits these notifications, because the application does not require them or the software platform does not support them.
Models are very finite in capturing the domain logic, such as performing calculations or other manipulations.Along with control of data access, models manages the application state. For example, take a list of objects. To track the selected objects, selected property is updated by the data model with the currently selected item. Other fields of the application can now access this property to find out which item is selected and react accordingly.This is how AngularJS Model becomes portable.
Models provide an excellent way to separate data and display. By migrating data and state to a model, more flexibility can be obtained while presenting the data.
Example
In the below example, list of authors with the quotes are initialized. All of the data and state is kept inside the controller.
[javascript]
angular.module('modelDemo', []).
config(function ($routeProvider) {
$routeProvider.
when('/', {
controller: 'AuthorListCtrl',
templateUrl: 'list.html'
}).
otherwise({
redirectTo: '/'
});
});
angular.module('modelDemo').controller("AuthorListCtrl", ['$scope', function($scope) {
$scope.list;
var fowler = {
name: "Fowler"
};
var twain = {
name: "Twain"
};
var poe = {
name: "Poe"
};
var plato = {
name: "Plato"
};
twain.quote = "Why, I have known clergymen, good men, kind-hearted, liberal, sincere" +
", and all that, who did not know the meaning of a 'flush.' It is enough " +
"to make one ashamed of one's species.";
fowler.quote = "Any fool can write code that a computer can understand. " +
"Good programmers write code that humans can understand.";
poe.quote = "Deep into that darkness peering, long I stood there, wondering, " +
"fearing, doubting, dreaming dreams no mortal ever dared to dream before.";
plato.quote = "All things will be produced in superior quantity and quality, and with greater ease, " +
"when each man works at a single occupation, in accordance with his natural gifts, " +
"and at the right moment, without meddling with anything else. ";
$scope.list = [twain, fowler, poe, plato];
$scope.selectQuote = function(author) {
$scope.selectedQuote = author.quote;
$scope.selectedAuthor = author;
}
$scope.isSelected = function(author) {
return author === $scope.selectedAuthor;
}
}]);
[/javascript]
Description
Normally, moving data from model to the view is easy, but there is a different directive that has to be used to move data from the view to the model. And that directive is, ng-model. With ng-model an expression can be specified, like username, and ng-model will push the value of the input given by the user into $scope object using the expression.
The
ng-model directive is used to bind HTML value Form controls ( select,input,textarea) to application data. The model/variable that has to be used in AngularJS application is defined by ng-model directive. Syntax
<element ng-init="expression"></element>
Example
[html]
<!DOCTYPE html>
<html lang="en-US">
<head>
<script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<title>ng-model directive</title>
</head>
<body>
<h1>ng-model directive</h1>
<div data-ng-app="">
Firstname: <input type="text" ng-model="firstName" />
Lastname: <input type="text" ng-model="lastName" />
<p>
<b>Fullname:</b>
{{firstName + " " + lastName}}
</p>
</div>
</body>
</html>
[/html]
Output:
Key Points
- AngularJS Model alerts the respective views and controllers when any change is made in its state.
- ng-model will push the value of the input given by the user into $scope object using the expression.