AngularJS_1 基本语法

来源：互联网发布：ipad限制应用访问网络编辑：程序博客网时间：2024/06/06 05:12
<!DOCTYPE html><html lang="en" ng-app="confusionApp"><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- The above 3 meta tags *must* come first in the head; any other head         content must come *after* these tags -->    <title>Ristorante Con Fusion: Menu</title>        <!-- Bootstrap -->    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">    <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">    <link href="styles/bootstrap-social.css" rel="stylesheet">    <link href="styles/mystyles.css" rel="stylesheet">    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->    <!--[if lt IE 9]>      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>    <![endif]--></head><body>    <div class="container">        <div class="row row-content" ng-controller="menuController as menuCtrl">            <div class="col-xs-12">                <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></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>                <div class="tab-content">                    <ul class="media-list tab-pane fade in active">                        <li class="media" ng-repeat="dish in menuCtrl.dishes | filter:menuCtrl.filtText">                            <div class="media-left media-middle">                                <a href="#"><img class="media-object img-thumbnail" ng-src={{dish.image}} alt="{{dish.name}}"></a>                            </div>                            <div class="media-body">                                <h2 class="media-heading">                                    {{dish.name}}                                    <span class="label label-danger">{{dish.label}}</span>                                    <span class="badge">{{dish.price | currency}}</span>                                </h2>                                <p>{{dish.description}}</p>                            </div>                        </li>                    </ul>                </div>            </div>        </div>    </div>    <script src="../bower_components/angular/angular.min.js"></script>    <script>    var app = angular.module('confusionApp',[]);    app.controller('menuController', function() {    this.tab = 1;    this.filtText = '';    this.select = function(setTab) {        this.tab = setTab;    }    this.isSelected = function (checkTab) {        return (this.tab === checkTab);    }    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 = "";    }    var dishes=[        {            name:'Uthapizza',            image: 'images/uthapizza.png',            category: 'mains',            label:'Hot',            price:'4.99',            description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',            comment: ''        },        {            name:'Zucchipakoda',            image: 'images/zucchipakoda.png',            category: 'appetizer',            label:'',            price:'1.99',            description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',            comment: ''        },        {            name:'Vadonut',            image: 'images/vadonut.png',            category: 'appetizer',            label:'New',            price:'1.99',            description:'A quintessential ConFusion experience, is it a vada or is it a donut?',            comment: ''        },        {            name:'ElaiCheese Cake',            image: 'images/elaicheesecake.png',            category: 'dessert',            label:'',            price:'2.99',            description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',            comment: ''        }];    this.dishes = dishes;});    </script></body></html>
0 0