码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-10-26 13:53:11      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:对象   动态绑定   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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!