Angular JS – Controllers & Filters

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s