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

<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. Inno Setup 网页显示插件 webctrl

    原文:Inno Setup 网页显示插件 webctrl ; -- Example.iss -- ; restools ; http://restools.hanzify.org ; 插件名:webc ...

  2. AjaxPro使用说明文档

    ajaxpro下载地址 AjaxPro使用说明     1 目录     2 修改历史纪录     3 1.什么是Ajax     4 2.为什么使用Ajax     4 3.Ajax应用场景     ...

  3. 【原版的：参赛作品】窥秘懒---android打开下拉手势刷新时代

    小飒的成长史原创作品:窥视懒人的秘密---android下拉刷新开启手势的新纪元转载请注明出处 **************************************************** ...

  4. IE通过推理IE陈述的版本号

    样例: 1. <!--[if !IE]> 除IE外都可识别 <![endif]--> 2. <!--[if IE]> 全部的IE可识别 <![endif]-- ...

  5. jquery 触屏滑动+定时滚动

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  6. beanutils设置参数和获取参数

    public class Employee implements DynaBean  { private String  firstName="李";    private Str ...

  7. [转]【Android】9-patch图片以及例子说明

    1.何为9-patch? NinePatch图片以*.9.png结尾,和普通图片(png图片)的区别是四周多了一个边框(如下图所示): 采用NinePatch图片做背景,可使背景随着内容的拉伸(缩小) ...

  8. DDD（领域驱动设计）理论结合实践

    DDD(领域驱动设计)理论结合实践   写在前面 插一句:本人超爱落网-<平凡的世界>这一期,分享给大家. 阅读目录: 关于DDD 前期分析 框架搭建 代码实现 开源-发布 后记 第一次听 ...

  9. Docker 01 Introduction

    Docker的组成: Docker Engine,一个轻量级.强大的开源容器虚拟化平台,使用包含了工作流的虚拟化技术,帮助用户建立.并容器化一个应用. Docker Hub,提供的一个SaaS服务,用 ...

  10. javascript继承之借用构造函数与原型

    javascript继承之借用构造函数与原型 在js中,关于继承只有利用构造函数和原型链两种来现实.以前所见到的种种方法与模式,只不过是变种罢了. 借用构造函数 1 2 3 4 5 6 7 8 9 1 ...