要求，后台传过来的数据，要求：（样式）性别为男的，变为灰色。（事件）并且没有点击事件，但女的有

<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的更多相关文章

  1. Angular6之ng build | ng build --aot | ng build --prod 差异

    由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...

  2. 在库中使用schematics——ng add与ng update

    起步 创建一个angular库 ng new demo --create-application=false ng g library my-lib 可见如下目录结构 ├── node_modules ...

  3. Part 14 ng hide and ng show in AngularJS

    ng-hide and ng-show directives are used to control the visibility of the HTML elements. Let us under ...

  4. How to Pronounce the Letters NG – No Hard G

    How to Pronounce the Letters NG – No Hard G Share Tweet Share Most of the time when you see the lett ...

  5. angular 2 - 001 ng cli的安装和使用

    angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...

  6. Angular 中后台前端解决方案 - Ng Alain 介绍

    背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...

  7. angular2 ng build --prod 报错：Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

    调试页面 ng serve 正常 ng build 也正常 ng build --prod 异常:Module not found: Error: Can't resolve './$$_gendir ...

  8. ng 构建

    1.ng 构建和部署 构建:编译和合并ng build 部署:复制dist里面的文件到服务器 2.多环境的支持 配置环境package.json "scripts": { &quo ...

  9. Flume NG高可用集群搭建详解

    .Flume NG简述 Flume NG是一个分布式,高可用,可靠的系统,它能将不同的海量数据收集,移动并存储到一个数据存储系统中.轻量,配置简单,适用于各种日志收集,并支持 Failover和负载均 ...

  10. FLUME NG的基本架构

    Flume简介 Flume 是一个cloudera提供的 高可用高可靠,分布式的海量日志收集聚合传输系统.原名是 Flume OG (original generation),但随着 FLume 功能 ...

随机推荐

  1. 使用pager进行分页

    pager jar网址:http://java2s.com/Code/Jar/t/Downloadtaglibspagejar.htm package com.binary.entity; impor ...

  2. 构建日均千万PV Web站点1

    如何构建日均千万PV Web站点 (一) 其实大多数互联网网站起初的网站架构都是(Linux+Apache+MySQL+PHP). 不过随着时代的发展,科技的进步.互联网进入寻常百姓家的生活.所谓的用 ...

  3. chrome切换hosts插件 hostsadmin

    chrome切换hosts插件 hostsadmin 时间 2013-07-16 10:49:09  网络进行时原文  http://www.netingcn.com/chrome-hostsadmi ...

  4. How To Configure Logging And Log Rotation In Apache On An Ubuntu VPS

    Introduction The Apache web server can be configured to give the server administrator important info ...

  5. ASP.NET MVC 使用MSBuild生成的几个注意事项

    做新项目,当时参考NopCommerce的结构,后台Nop.Admin是一个独立的Area Web Site,但部署的时候发现,使用一键发布,Admin Area会丢失. 研究了下NopCommerc ...

  6. QuickWebApi：使用Lambada方式，完成对WebApi的开发和调用。

    QuickWebApi 目的:使用Lambada方式,完成对WebApi的开发和调用. 缘由:为了解耦服务和展现,将越来越多的使用WebApi提供各种服务:随着服务的细化,WebApi的接口将越来越多 ...

  7. 图解Javascript之Function

    好东西分享给大家,但要尊重事实!!!因此特别说明:本图非我本人亲自所作,乃我大天朝网友所绘制.个人感觉此图,覆盖全面,细节考虑甚周全,因此分享给大家,同时在此特别感谢网友的无私分享!

  8. 分布式搜索ElasticSearch构建集群与简单搜索实例应用

    分布式搜索ElasticSearch构建集群与简单搜索实例应用 关于ElasticSearch不介绍了,直接说应用. 分布式ElasticSearch集群构建的方法. 1.通过在程序中创建一个嵌入es ...

  9. Ubuntu13.04 Eclipse下编译安装Hadoop插件及使用小例

    Ubuntu13.04 Eclipse下编译安装Hadoop插件及使用小例 一.在Eclipse下编译安装Hadoop插件 Hadoop的Eclipse插件现在已经没有二进制版直接提供,只能自己编译. ...

  10. iOS单元测试

    参考下面的链接 ,写的还不错 http://gaohaijun.blog.163.com/blog/static/176698271201151052325749/