1. 程式人生 > >Angular——ng-switch、ng-class、ng-click

Angular——ng-switch、ng-class、ng-click

cti code src == app 部分 control click var

ng-switch 指令根據表達式顯示或隱藏對應的部分。對應的子元素使用 ng-switch-when 指令,如果匹配選中選擇顯示,其他為匹配的則移除。你可以通過使用 ng-switch-default 指令設置默認選項,如果都沒有匹配的情況,默認選項會顯示。

ng-class 指令用於給 HTML 元素動態綁定一個或多個 CSS 類。指令的值可以是字符串,對象,或一個數組。如果是字符串,多個類名使用空格分隔。如果是對象,需要使用 key-value 對,key 是一個布爾值,value 為你想要添加的類名。只有在 key 為 true 時類才會被添加。如果是數組,可以由字符串或對象組合組成,數組的元素可以是字符串或對象。

ng-click 指令告訴了 AngularJS HTML 元素被點擊後需要執行的操作。

<style>
    .active {
        background-color: seagreen;
    }
</style>
<script src="angular.min.js"></script>
<script>
        var App = angular.module(‘App‘, []);
        App.controller(‘demo‘, [‘$scope‘, function ($scope) {
            $scope.show 
= function (type) { $scope.type = type; }; }]); </script> <body ng-app="App"> <div ng-controller="demo"> <div ng-click="show(‘合肥‘)" ng-class="{active:type==‘合肥‘}">合肥</div> <div ng-click="show(‘滁州‘)" ng-class="{active:type==‘滁州‘}">滁州</div> <div ng-click="show(‘安慶‘)" ng-class="{active:type==‘安慶‘}">安慶</div> <div ng-switch
="type"> <div style="width:200px;height:200px;background-color:aqua;" ng-switch-when="合肥">第一</div> <div style="width:200px;height:200px;background-color:red;" ng-switch-when="滁州">第二</div> <div style="width:200px;height:200px;background-color:burlywood;" ng-switch-when="安慶">第三</div> </div> </div> </body>

參考:Angular中文網

Angular——ng-switch、ng-class、ng-click