<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angular JS</title>
</head>
<body>
<!--
Normally I don't use the "data-ng-init" directive.
Instead I use a controller to control the angular application.
I use the "data-ng-controller" directive to refer the controller
-->
<div data-ng-app="" data-ng-controller="myController">
<h3>Controllers</h3>
<p>
First Name:
<input type="text" data-ng-model="person.firstName" />
</p>
<p>
Last Name:
<input type="text" data-ng-model="person.lastName" />
</p>
<p>Full Name: {{person.firstName + " " + person.lastName}}</p>
<p>Full Name: {{person.fullName()}}</p>
<hr />
<!--
I can use filters on binding to specify a particular format
-->
<h3>Binding filters</h3>
<p>Full Name uppercase: {{person.fullName() | uppercase}}</p>
<p>Full Name lowercase: {{person.fullName() | lowercase}}</p>
<p>
Value:
<input type="text" data-ng-model="value" />
</p>
<p>Currency value: {{value | currency}}</p>
<hr />
<!--
I can use filters on loops to specify a particular order
-->
<h3>"OrderBy" filter for loops</h3>
Names
<ul>
<li data-ng-repeat="name in names | orderBy:'toString()'">
<p>The name is: {{ name }}</p>
</li>
</ul>
Articles by name
<ul>
<li data-ng-repeat="article in articles | orderBy:'name'">
<p>The article is: {{ article.name + ' ' + (article.price | currency) }}</p>
</li>
</ul>
Articles by price
<ul>
<li data-ng-repeat="article in articles | orderBy:'price'">
<p>The article is: {{ article.name + ' ' + (article.price | currency) }}</p>
</li>
</ul>
<hr />
<!--
I can use filters on loops to filter a subset of elements.
To do this I must use a dedicated model property (implicitly
created by referring with the "data-ng-model" directive)
-->
<h3>"Filter" filter for loops</h3>
<p>
Article filter:
<input type="text" data-ng-model="articleFilter" />
</p>
<p>Article filter: {{articleFilter}}</p>
<ul>
<!--
The filter will show every article for which the filter
value matches a part of any of his values (in this case
can be a part of the name or a part of the price)
-->
<li data-ng-repeat="article in articles | filter:articleFilter | orderBy:'price'">
<p>The article is: {{ article.name + ' ' + (article.price | currency) }}</p>
</li>
</ul>
</div>
<script>
//This is the controller constructor. The $scope argument is
//the application for which the controller has been instantiated
function myController($scope) {
//Through the $scope object I
//can define an hardcoded model
$scope.person = {
firstName: "John",
lastName: "Doe",
//This is a calculated property. Must
//be referred as a function for binding
fullName: function () {
var x = $scope.person;
return x.firstName + " " + x.lastName;
}
};
$scope.value = 50;
$scope.names = ["pippo", "pluto", "tizio", "caio", "adamo", "eva"];
$scope.articles = [{ name: "lamp", price: 120 }, { name: "chair", price: 50 },
{ name: "table", price: 100 }, { name: "glass", price: 20 }];
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
</body>
</html>
JSon filter
I can use this filter when i want to bind a complex object, to display his JSon code. Indeed the JSon code is returned also without the filter, but with the filter is formatted in a better way.
Advertisements
