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

ng-class,与ng-click

时间:2016-08-27 12:52:06      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:

<html>
    <head>
        <meta charset="utf-8"/>
        <script src="js/angular.min.js" ></script>
         <style type="text/css">
            html,body{margin: 0;padding: 0; box-sizing: border-box;}
            table{width: 100%; border-collapse:collapse; text-align: center; cursor: pointer;}
            thead{background-color: #CCCCCC;}
            tbody{color: dodgerblue; }
            th,td{border:1px solid red;  }
            ul{padding: 0; margin: 0;}
            ul li{list-style: none; background-position: ;}
            .girl{color: gray;}
        </style>
    </head>
    <body ng-app="myapp" ng-controller="one">
        <div>
            <fieldset>
                <legend>老湿资料</legend>
                <table >
                    <thead>
                        <tr>
                            <th>名字</th>  
                            <th>班级</th>  
                            <th>年龄</th>
                        </tr>
                    </thead>
                    <tbody>
                       <tr ng-repeat="y in mytb">
                            <td>{{y.name}}</td>
                            <td ng-class="{girl:y.sex==‘男‘}" ng-click="speak(y.sex)">{{y.sex}}</td>
                            <td>{{y.age}}</td>
                        </tr>
                    </tbody>
                </table>
            </fieldset>
        </div>
        <script type="text/javascript">
            angular.module("myapp",[]).controller("one",function($scope,$http){
                $http.get("js/db.json").success(function(request){
                    $scope.mytb=request;
                    $scope.speak=function(sex){
                        if(sex==""){
                            alert("只有性别为"+sex+",才会弹噢!")
                        }
                        
                    }
                })
            })
        </script>
    </body>
</html>

 

 

[{
     "name":"王老师",
     "sex":"男",
     "age":"25岁"
 },{
     "name":"张老师",
     "sex":"女",
     "age":"30岁"
 },{
     "name":"李老师",
     "sex":"女",
     "age":"20岁"
 },{
     "name":"丁老师",
     "sex":"男",
     "age":"20岁"
 }]

 

ng-class,与ng-click

标签:

原文地址:http://www.cnblogs.com/flyings/p/5812779.html

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