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

利用angular给节点添加样式

时间:2016-12-20 16:09:06      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:ng-repeat   oct   margin   span   eve   body   scope   class   angularjs   

<!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>

 

利用angular给节点添加样式

标签:ng-repeat   oct   margin   span   eve   body   scope   class   angularjs   

原文地址:http://www.cnblogs.com/null11/p/6202929.html

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