zoukankan      html  css  js  c++  java
  • ng-class,与ng-click

    要求,后台传过来的数据,要求:(样式)性别为男的,变为灰色。(事件)并且没有点击事件,但女的有

    <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岁"
     }]

  • 相关阅读:
    程序员练手项目
    文件描述符
    安卓深度探索(卷一)第九章
    安卓深度探索(卷一)第十章
    安卓深度探索(卷一)第八章
    安卓深度探索(卷一)第六章
    安卓深度探索(卷一)第七章
    安卓深度探索(卷一)第五章
    记一次联想A820t救砖线刷
    记一次酷派尚锋Y75刷机
  • 原文地址:https://www.cnblogs.com/dshvv/p/5812779.html
Copyright © 2011-2022 走看看