<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>入门</title>

    <script src="node_modules/angular/angular.js"></script>

    <style>

        .bgc-red {

            background-color: red;

        }

    </style>

</head>

<body ng-app="s1.app">

<button class="{{currentBtn == 1 ? 'bgc-red':''}}" ng-click="setCurrent(1)">按钮1</button>

<button class="{{currentBtn == 2 ? 'bgc-red':''}}" ng-click="setCurrent(2)">按钮2</button>

<button class="{{currentBtn == 3 ? 'bgc-red':''}}" ng-click="setCurrent(3)">按钮3</button>

<button class="{{currentBtn == 4 ? 'bgc-red':''}}" ng-click="setCurrent(4)">按钮4</button>

<script>

    // 1. 定义一个我们自己的模块，

    // 第一个参数是：模块名，

    // 第二个参数：所依赖的其他的模块的名字的数组

    var app = angular.module('s1.app', []);

    // app.run是Angularjs版本的“入口函数”，我们的Angularjs框架加载完成之后，就会来执行这里的函数。

    // 其中有一点需要注意：$rootScope是Angularjs提供的“数据对象”，

    // 我们操作这个数据对象，就可以把变化同步到DOM上

    // 参数名是写死的，不要变。（Angularjs的回调函数的传参，很多地方是“只认名字，不认顺序”的）

    app.run(function ($rootScope) {

        $rootScope['msg'] = 'hello angular';

        $rootScope['cssClass'] = 'bgc-red';

        $rootScope['currentBtn'] = 1; // 标识当前的按钮

        $rootScope['setCurrent'] = function (current) { // 当按钮被点击之后，调用，设置当前的按钮

            $rootScope['currentBtn'] = current;

        }

    })

</script>

</body>

</html>

angular中的ng-click指令案例的更多相关文章

  1. Angular中的内置指令和自定义指令

    NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...

  2. Angular中ui-router实现路由嵌套案例

    学习 ui-router 资料整理 对于Angular内置的路由是单路由视图,ui-router可以实现路由嵌套.后面将会有一个案例概括前面所有资料整理 学习 ui-router - 管理状态  ht ...

  3. angular中要注意的指令

    1.ng-repeat 遍历集合,给每个元素生成模板实例,每个实例的作用域中可以用一些特殊属性,如下: $index //遍历集合的下标 $first //遍历集合中的第一个对象 $last //遍历 ...

  4. 在angular7中创建组件/自定义指令/管道

    在angular7中创建组件/自定义指令/管道 组件 使用命令创建组件 创建组件的命令:ng generate component 组件名 生成的组件组成: 组件名.html .组件名.ts.组件名. ...

  5. Angular 组件与模板 - 属性指令

    指令概览 在 Angular 中有三种类型的指令: 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 — 改变元素.组件或其它指令的外观和行为 ...

  6. angular中的MVVM模式

    在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(What ...

  7. angular中的服务

    angular中的服务 angular中的服务相当于一个状态管理,可以将数据放在服务里面进行获取以及编辑. 服务的安装命令: ng g service count 安装好后,会在服务的ts文件中引入一 ...

  8. Angular中的数据绑定

    (1)HTML绑定:{{}} (2)属性绑定:[] 注意:属性绑定通常赋值为变量,如果赋值为常量(如字符串常量) 必须用引号括起来,如<img [src]="'../../assets ...

  9. 在 Angular 中实现搜索关键字高亮

    在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...

  10. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

随机推荐

  1. python tips:matplotlib保存多张图片时，图片会相互叠加

    问题: 使用matplotlib的pyplot.savefig保存图片时,前面的图会不断叠加到后面的图中. 原因: savefig方法保存图片并不会重置画布,所以导致图片的相互叠加. 解决方法: 保存 ...

  2. BZOJ 4999: This Problem Is Too Simple！ DFS序+LCA+树状数组+离线

    Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) , ...

  3. BZOJ 3036: 绿豆蛙的归宿 期望 + 拓扑排序

    随着新版百度空间的下线,Blog宠物绿豆蛙完成了它的使命,去寻找它新的归宿.给出一个有向无环的连通图,起点为1终点为N,每条边都有一个长度.绿豆蛙从起点出发,走向终点. 到达每一个顶点时,如果有K条离 ...

  4. php第七节课

    多态,重载,克隆 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  5. [luogu1447 NOI2010] 能量采集 (容斥原理)

    传送门 Description 栋栋有一块长方形的地,他在地上种了一种能量植物,这种植物可以采集太阳光的能量.在这些植物采集能量后,栋栋再使用一个能量汇集机器把这些植物采集到的能量汇集到一起. 栋栋的 ...

  6. Windows 2003 IIS 不支持ASP的问题

    Windows 2003 IIS 不支持ASP的问题 问题: HTTP 错误 404 - 文件或目录未找到. Internet 信息服务 (IIS) 第一步,启用Asp,进入:控制面板 -> 管 ...

  7. mysql的用户访问权限规划

    看了mysql的关于用户权限和安全的管理,感觉看起来还是不太好理解,首先mysql的连接方式是需要核对三个要素:user.passwd. host.而且这个user和passwd并不是o上面的user ...

  8. Linux查看 kennel , 物理CPU个数、核数、逻辑CPU个数

    other article on my list: 查看进程 https://i.cnblogs.com/PostDone.aspx?postid=9231604&actiontip=%E4% ...

  9. [bzoj3696]化合物_树形dp

    化合物 bzoj-3696 题目大意:给你一棵树,定义两个点i , j之间的A值是(dis[i]-dis[lca(i,j)])xor(dis[j]-dis[lca(i,j)]).对所有的k$\in$[ ...

  10. Spring深入理解（三）

    Spring 中 AOP 特性详解 动态代理的实现原理 要了解 Spring 的 AOP 就必须先了解动态代理的原理,因为 AOP 就是基于动态代理实现的.动态代理还要从 JDK 本身说起. 在 Jd ...