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

<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. MSSQL2008数据库备份还原和数据恢复

    原文:MSSQL2008数据库备份还原和数据恢复   序言 一直想写一篇关于数据库备份与恢复的文章,但基于能力的有限对数据库认知的有限怕不足以准确的表达,最后思考很久还是决定把自己的一些理解写出来供大 ...

  2. JS中的prototype（转载）

    在研究别人写的js图像处理算法时,发现其中脚本中大量使用prototype,很难读明白,就网上查了下资料发现这篇文章很易懂,就转载如下: 1 原型法设计模式 在.Net中可以使用clone()来实现原 ...

  3. hibernate 获取实体的表名、主键名、列名(转载+修改)

    package com.escs.utils; import java.util.Iterator; import org.hibernate.cfg.AnnotationConfiguration; ...

  4. Code reviews and bad habits

    图文大话编程语言史 投递人 itwriter 发布于 2014-03-07 17:16 评论(2) 有298人阅读  原文链接  [收藏]  « » 英文原文:Code reviews and bad ...

  5. Lambda表达式的几种使用方式

    Lambda 的表达式的编写格式如下: x=> x * 1.5 当中 “ => ” 是 Lambda 表达式的操作符,在左边用作定义一个参数列表,右边可以操作这些参数. 例一, 先把 in ...

  6. 将网站固定到开始菜单，自定义图标、颜色和Windows推送通知

    Windows 8.1——将网站固定到开始菜单,自定义图标.颜色和Windows推送通知 记得在IE 9和Windows 7刚出来那会儿我写过一篇文章来介绍如何自定义网站将其固定到Windows的任务 ...

  7. FineUI Grid 缓存列显示隐藏状态

    当列表字段过多时,需要隐藏掉一些,但是再次打开页面又显示出来了,FineUI没有提供缓存功能,那么自己动手,打开[ext-part2.js]找到 “if (Ext.grid.column.RowNum ...

  8. sequence diagram

    [UML]UML系列——时序图(顺序图)sequence diagram 系列文章 [UML]UML系列——用例图Use Case [UML]UML系列——用例图中的各种关系(include.exte ...

  9. Windbg找出死锁

    使用Windbg找出死锁,解决生产环境中运行的软件不响应请求的问题 前言 本文介绍本人的一次使用Windbg分析dump文件找出死锁的过程,并重点介绍如何确定线程所等待的锁及判断是否出现了死锁. 对于 ...

  10. 通过google的inurl:backupdata*dede_admin获取账号密码

    简要描述:很简单,通过google可找出备份路径. 详细说明:http://www.google.com.hk/search?q=inurl:backupdata*dede_admin&hl= ...