利用angular给节点添加样式

最新推荐文章于 2024-11-08 16:09:18 发布

weixin_34235457

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量128

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/null11/p/6202929.html

版权

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/angularjs.js"></script>
    <style>
        body{
            font-size: 32px;
        }
        ul{
            list-style-type: none;
            width: 408px;
            margin:0px;
            padding: 0px;
        }
        ul .odd{
            color:#0026ff;
        }
        ul .even{
            color:#ff0000;
        }
        ul .bold{
            font-weight:bold;
            color:red;
        }
        ul li span{
            width: 52px;
            float:left;
            padding:0px 10px;
        }
        ul .focus{
            background: #cccccc;
        }
    </style>
</head>
<body>
    <div ng-controller="c2_ll">
        <ul>
            <li ng-class="{{bold}}">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
            </li>
            <li ng-class-even="even" ng-class-odd="odd" ng-repeat="stu in data" ng-click="li_click($index)" ng-class="{focus: $index==focus}">
            <span>{{$index+1}}</span>
            <span>{{stu.name}}</span>
            <span>{{stu.sex}}</span>    
            <span>{{$first?'是':'否'}}</span>
            <span>{{$last?'是':'否'}}</span>
            </li>
        </ul>
    </div>
</body>
<script>
    var app=angular.module('myapp',[]);
    app.controller('c2_ll',function($scope){
        $scope.bold="bold";
        $scope.li_click=function(i){
            $scope.focus=i;
        };
        $scope.data=[
        {name:"11",sex:"女"},
        {name:"22",sex:"女"},
        {name:"33",sex:"男"},
        {name:"44",sex:"男"}
        ]
    })
</script>
</html>