[Cousera Angular JS Learning note] first week (2)

Before writing a simple angular page, here mainly to learn a few usage: Controller,filter

(1) The first exercise is mainly to move the contents of the original ng-init to the controller

First define the module name

Then initialize the module and controller, under the script tag

    <script>        var app = Angular.module (' Confusionapp ', []);        App.controller (' Menucontroller ', function () {        });    </script>
Delete the original ng-init content, write to function, and this.dishes=dishes equivalent to the controller's member variable bar

At the same time, the original use of Ng-init label place, replaced with the use of Ng-controller, take the individual name

<div class= "Row row-content" ng-controller= "Menucontroller as MenuCtrl" >

Use menuctrl.dishes when the last reference is used

<li class= "Media" ng-repeat= "dish in Menuctrl.dishes" >


(2) The second exercise is to use the filter , mainly angular comes with the filter, the front has seen currency, is to convert the price format into a currency format, and other uppercase,lowercase,currency,
Date,filter,orderby,json,limitto
This exercise is mainly about the use of Bootstrap's Tab,ng-class Ng-click, and finally the filter
1, the first part of the comments before the deletion, temporarily useless

                        <p>comment: {{dish.comment}}</p>                        <p>type your Comment:                         <input type= "text" ng-model= " Dish.comment "></p>

2, plus the Bootstrap tab
<ul class= "nav nav-tabs" role= "Tablist" >
<li role= "Presentation" >
<a
aria-controls= "All Menu"
role= "tab" >the menu</a></li>
<li role= "Presentation" >
<a
aria-controls= "Appetizers"
role= "tab" >Appetizers</a></li>
<li role= "Presentation" >
<a
aria-controls= "Mains"
role= "tab" >Mains</a></li>
<li role= "Presentation" >
<a
aria-controls= "Desserts"
role= "tab" >Desserts</a></li>
</ul>
3, this time the following menulist is not in the tab control, move to the tab

            <div class= "Tab-content" >               <ul class= "media-list Tab-pane Fade in active" >                   ...               </ul>            </div>

4. The next step is to switch between tab pages
First, the current tab variable is maintained in the controller

This.tab = 1;

Then add the function select in the controller

            This.select = function (settab) {                this.tab = Settab;                            }


Use Ng-click to invoke the value of Select Update tab when the corresponding tab is clicked

 <ul class= "nav nav-tabs" role= "Tablist" > <li role= "Presentation" > <a ng-click= "Menuctrl.select (1)" aria-controls= "all Menu" role= " Tab ">the menu</a></li> <li role=" Presentation "> <a ng-click= "Menuctrl.select (2)" aria-controls= "appetizers" role= "tab" >Appetizers</a>                     </li> <li role= "Presentation" > <a ng-click= "menuctrl.select (3)" aria-controls= "mains" role= "tab" >Mains</a></li> <l I role= "presentation" > <a ng-click= "menuctrl.select (4)" aria-controls= "Desse RTS "role=" tab ">Desserts</a></li> </ul> 
 Use Ng-class to update the CSS of the page based on conditions, To switch between tabs 

                <ul class= "nav nav-tabs" role= "Tablist" > <li role= "Presentation"                     Ng-class= "{active:menuCtrl.isSelected (1)}" > <a ng-click= "menuctrl.select (1)" aria-controls= "all menu" role= "tab" >the menu</a></li> <li role= "Presentation" ng-class= "{active:menuCtrl.isSelected (2)}" > <a ng-click= " Menuctrl.select (2) "aria-controls=" appetizers "role=" tab ">appetizers</a>& lt;/li> <li role= "presentation" ng-class= "{active:menuCtrl.isSelected (3)}"                    ; <a ng-click= "Menuctrl.select (3)" aria-controls= "mains" role= "tab" >mains</ a></li> <li role= "presentation" ng-class= "{active:menuCtrl.isSelected (4 )}"> <a ng-click= "menuctrl.select (4)" aria-controls= "desserts" role= "tab" >Desserts</a></li> </ul>

Well, as before, add a function to the controller
this.isselected = function (settab) {
return This.tab = = = Settab;
};

5, the last step using filter, no name specified when the match all field

<li class= "Media" ng-repeat= "dish in Menuctrl.dishes | Filter:menuCtrl.filtText ">

<li class= "Media" ng-repeat= "dish in Menuctrl.dishes | Filter:{category:menuctrl.filttext} ">

You need to initialize the Filttext in the controller
This.filttext = ";
Need to set filtertext when tab is set
This.select = function (settab) {
This.tab = Settab;

if (Settab = = = 2)
This.filttext = "appetizer";
else if (settab = = = 3)
This.filttext = "mains";
else if (settab = = = 4)
This.filttext = "Dessert";
Else
This.filttext = "";
};

Complete!

[Cousera Angular JS Learning note] first week (2)