标签:对象 动态绑定 red back ref [] module 情况 ack
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
标签:对象 动态绑定 red back ref [] module 情况 ack
原文地址:http://www.cnblogs.com/wuqiuxue/p/7735896.html