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

<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. /bin/bash^M: bad interpreter: No such file or directory

    <今天遇到的问题,  网上有非常多类似的文章,  个人记录下来,  加深记忆,  已经明确的就绕路吧.> 运行一个脚本full_build.sh 时, 一直是提示我: -bash: ./f ...

  2. sql内置函数pivot强大的行转列功能

    原文:sql内置函数pivot强大的行转列功能 语法: PIVOT用于将列值旋转为列名(即行转列),在SQL Server 2000可以用聚合函数配合CASE语句实现 PIVOT的一般语法是:PIVO ...

  3. android项目--上下文菜单

    一般说到上下文菜单基本上都是长按事件,在一个控件上长按,就会弹出一个菜单. 1.创建上下文菜单: //覆盖方法,创建上下文菜单 @Override public void onCreateContex ...

  4. html5学习(一)--canvas画时钟

    利用空余时间学习一下html5. <!doctype html> <html> <head></head> <body> <canva ...

  5. mvc上传头像加剪裁功能

    asp.net mvc上传头像加剪裁功能 正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery ...

  6. MVC之前的那点事儿系列进入CLR

    MVC之前的那点事儿系列(1):进入CLR MVC之前的那点事儿系列,是笔者在2012年初阅读MVC3源码的时候整理的,主要讲述的是从HTTP请求道进入MVCHandler之前的内容,包括了原创,翻译 ...

  7. [转]Breaking Bad With DTrace

    Source:http://initwithfunk.com/blog/2013/05/31/breaking-bad-with-dtrace/ I’ve spent an unwise amount ...

  8. Visual Studio 2013 发布正式版

    SELECT COUNT(1) 和SELECT COUNT(*)哪个性能好? Visual Studio 2013 发布正式版及使用感受 (注意:文末我添加了一个小节,用来更新最新的一些使用感受.) ...

  9. weblogic配置修改java代码后不需要重启热部署方式

    我用的是weblogic8.x 在项目的WEB-INFO中创建weblogic.xml --------以下内容复制到weblogic.xml中------------ <!DOCTYPE we ...

  10. 用Winrar批量解压缩有密码文件方法，只需输入一次密码

    老王上传的文件多是RAR压缩格式的, 每个系列下载完,都20多集,解压缩的时候要一个一个的输入密码,太浪费时间. 1) 把下载的需要解压缩的文件统一放到一个文件夹下. 2) 启动winrar程序 (从 ...