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

<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. Android学习路径（四）文件项目学习的名单，android显示单元经常使用的

    1.的该项目文件所谓名单AndroidManifest.xml文件.该文件,但有很大的利用,例:app名字.图标,app支持的版本app等等.以下我就介绍下这个清单文件的各个參数的作用. <ma ...

  2. win7 Python 环境 准备 配置

    包括Python,eclipse,jdk,pydev,pip,setuptools,beautifulsoup,pyyaml,nltk,mysqldb的下载安装配置. **************** ...

  3. mass种子模块之domready

    总结:由于IE6/7/8不支持DOMContentLoaded事件,虽然它支持onreadystatechange事件,但是readyState=complete几乎和onload事件一样,需要等页面 ...

  4. Ninject的项目情况

    Ninject的项目情况 首先,它有很多的项目组成,适合不同的环境,当然它有几个基本的核心库. 为什么它会有这么多的库呢?因为轻量级,易于使用和被扩展是它的目标,代码越是少,你使用代码的可能性越高嘛. ...

  5. script —— 终端里的记录器

    当 你在终端或者控制台工作时,你可能想要记录在终端中所做的一切.这些记录可以用来当作史料,保存终端所发生的一切.比如说,你和一些Linux管理员们同 时管理着相同的机器,或者你让某人远程登陆到了你的服 ...

  6. CentOS6.8安装JDK1.7

    一.查看当前系统是否自带JDK rpm -qa | grep java tzdata-java-2016c-1.el6.noarch java-1.7.0-openjdk-1.7.0.99-2.6.5 ...

  7. ecexl操作

    /// <summary> /// 写入ecexl /// </summary> /// <param name="dt"></param ...

  8. 我的Pandas应用场景（2）

    上文交代了一些啰嗦事,本文开始,就要来点实际的了. 先来一个比较简单的场景: Given:一个包括N(极其复杂,这里取3个)个列的DataFrame:df,df包括index: And:对df所有列元 ...

  9. 跨平台C/C++集成开发环境-Code::Blocks-内置GCC

    Code::Blocks 是一个开放源码的全功能的跨平台C/C++集成开发环境. 相比于基于Delphi的Dev-C++共享C++IDE,Code::Blocks是开放源码软件.Code::Block ...

  10. CFileDialog类与16进制格式的dat文件

    CFileDialog类与16进制格式的dat文件 要将数据保存为.dat文件,而且是16进制的数字,怎么保存? 要读取.dat文件,文件是16进制的,怎么读取? 用CFileDialog类可以得到[ ...