angular切换样式

2020-04-17 14:54 默默不语阅读(695) 评论(0) 编辑收藏举报

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
                    .l{
                        background-color: #31B0D5;
                    }
                    .a{
                        background-color: #777777;
                    }
                    div{
                        width: 100px;
                        height: 100px;
                        background-color: red;
                    }
                </style>
    </head>
    <!-- 
        * ng-class: 动态切换class,多用于表格的间隔色显示
                        语法：ng-class="{第一个类名:true,第二个类名:false}";
        * ng-style: 修改样式
        * ng-mouseenter: 鼠标移入
        * ng-mouseleave: 鼠标移出
     -->
    <body ng-app="myApp">
            <!-- in表达式：类似于增强for循环 -->
            <table ng-controller="z2">
                <thead>
                    <th>序号</th>
                    <th>是否为最后一行</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </thead>
                <tbody ng-repeat="user in users">
                    <!-- 一旦使用ng-repeat对数组进行遍历，那么angularJS会为每个元素都创建一个作用域 -->
                    <tr ng-class="{l:$odd,a:$even}">
                        <td>{{$index+1}}</td>
                        <td>{{$odd}}</td>
                        <td ng-bind="user.username"></td>
                        <td>{{user.age}}</td>
                    </tr>
                </tbody>
            </table>
        <div ng-controller="z3" ng-mouseenter="enter()" ng-mouseleave="leave()" ng-style="z3_style">
            
        </div>
        <script src="js/angular.min-1.2.9.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            angular.module("myApp",[])
                .controller('z2',['$scope',function(z2f){
                    /* 数组，每一个元素都是一个对象 */
                    z2f.users=[
                        {username:"嘎嘎嘎",age:20},
                        {username:"咕咕咕",age:26},
                        {username:"呱呱呱",age:25}
                    ];
                }])
                .controller('z3',['$scope',function(z3f){
                    /* 数组，每一个元素都是一个对象 */
                    z3f.enter = function(){
                        z3f.z3_style = {
                            background:"black"
                        };
                    }
                    z3f.leave = function(){
                        z3f.z3_style = {
                            background:"red"
                        };
                    };
                }])
        </script>
    </body>
</html>