<!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