https://github.com/sbedulin/pro-angularjs-book
<html ng-app="todoApp">
<script src="angular.js"></script>
var todoApp = angular.module("todoApp", []);
Logic that deals with storing or retrieving data is part of the model. Logic that deals with formatting the data to display to the user is part of the view. The controller sits between the model and the view and connects them. The controller responds to user interaction, updating the data in the model and providing the view with the data that it requires.
You won’t always want views to have access to the complete model, so you use the controller to explicitly select those portions of the data that are going to be available, known as the scope.
Views are generated by combining data the controller provides with annotated HTML elements that produce content for the browser to display.
var model = {
user: "Adam",
items: [{ action: "Buy Flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
};
var todoApp = angular.module("todoApp", []);
todoApp.controller("ToDoCtrl", function ($scope) {
$scope.todo = model;
$scope.incompleteCount = function () {
var count = 0;
angular.forEach($scope.todo.items, function (item) {
if (!item.done) { count++ }
});
return count;
}
$scope.warningLevel = function () {
return $scope.incompleteCount() < 3 ? "label-success" : "label-warning";
}
});
<tr ng-repeat="item in todo.items">
<td>{{item.action}}</td>
<td>{{item.done}}</td>
</tr>
{{todo.items.length}}
Using Two-Way Model Binding
<input type="checkbox" ng-model="item.done" />
ng-model attribute tells AngularJS to create a two-way binding.
<span class="label label-default" ng-hide="incompleteCount() == 0">
{{incompleteCount()}}
</span>
$scope.addNewItem = function (actionText) {
$scope.todo.items.push({ action: actionText, done: false });
}
<input class="form-control" ng-model="actionText" />
<span class="input-group-btn">
<button class="btn btn-default"
ng-click="addNewItem(actionText)">Add</button>
</span>
<body ng-controller="ToDoCtrl">
<html ng-app="todoApp">
<script src="angular.js"></script>
var todoApp = angular.module("todoApp", []);
Logic that deals with storing or retrieving data is part of the model. Logic that deals with formatting the data to display to the user is part of the view. The controller sits between the model and the view and connects them. The controller responds to user interaction, updating the data in the model and providing the view with the data that it requires.
You won’t always want views to have access to the complete model, so you use the controller to explicitly select those portions of the data that are going to be available, known as the scope.
Views are generated by combining data the controller provides with annotated HTML elements that produce content for the browser to display.
var model = {
user: "Adam",
items: [{ action: "Buy Flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
};
var todoApp = angular.module("todoApp", []);
todoApp.controller("ToDoCtrl", function ($scope) {
$scope.todo = model;
$scope.incompleteCount = function () {
var count = 0;
angular.forEach($scope.todo.items, function (item) {
if (!item.done) { count++ }
});
return count;
}
$scope.warningLevel = function () {
return $scope.incompleteCount() < 3 ? "label-success" : "label-warning";
}
});
<tr ng-repeat="item in todo.items">
<td>{{item.action}}</td>
<td>{{item.done}}</td>
</tr>
{{todo.items.length}}
Using Two-Way Model Binding
<input type="checkbox" ng-model="item.done" />
ng-model attribute tells AngularJS to create a two-way binding.
<span class="label label-default" ng-hide="incompleteCount() == 0">
{{incompleteCount()}}
</span>
$scope.addNewItem = function (actionText) {
$scope.todo.items.push({ action: actionText, done: false });
}
<input class="form-control" ng-model="actionText" />
<span class="input-group-btn">
<button class="btn btn-default"
ng-click="addNewItem(actionText)">Add</button>
</span>
