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

  • 相关阅读:
    《Code Complete》ch.18 表驱动法
    libevent I/O示例
    Unity3d 与 Objective-C 数据交互,持续更新中
    progress 相关事件 异步 ajax
    数据结构chapter01_C++基础
    vue环境搭建
    时间复杂度和空间复杂度
    linux内核数据结构之链表
    linux内核数据结构之kfifo
    c++ iterator(迭代器)分类及其使用
  • 原文地址:https://www.cnblogs.com/dshvv/p/5812779.html
Copyright © 2011-2022 走看看