Angular——ng-switch、ng-class、ng-click
阿新 • • 發佈：2017-10-26
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