<!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. 【第三课】kaggle案例分析三

    Evernote Export 比赛题目介绍 TalkingData是中国最大的第三方移动数据平台,移动设备用户日常的选择和行为用户画像.目前,TalkingData正在寻求每天在中国活跃的5亿移动设 ...

  2. eoLinker AMS 专业版V3.3发布:分享项目可以测试并选择分享内容等

    eoLinker AMS是集API文档管理.API自动化测试.开发协作三位一体的综合API开发管理平台,是中国最大的在线API管理平台.目前eoLinker AMS已经为来自全球的超过两万家企业托管超 ...

  3. 磁盘测试----fio

    测试前提 我们在进行测试时,都会分清楚: 测试对象:要区分硬盘.SSD.RAID.SAN.云硬盘等,因为它们有不同的特点 测试指标:IOPS和MBPS(吞吐率),下面会具体阐述 测试工具:Linux下 ...

  4. for 循环的反汇编浅析

    for 循环 for 循环是使用频度最高的循环结构,我们通过 C 语言反汇编实例,来分析 for 循环结构在计算机底层的原理和构造.首先,我们编写一个简单的 for 循环: 为了方便观察,我们用十六进 ...

  5. [luogu4478 BJWC2018] 上学路线 (容斥原理+拓展lucas)

    传送门 Description 小B 所在的城市的道路构成了一个方形网格,它的西南角为(0,0),东北角为(N,M). 小B 家住在西南角,学校在东北角.现在有T 个路口进行施工,小B 不能通过这些路 ...

  6. request.getScheme()、 request.getServerName() 、 request.getServerPort() 、 request.getContextPath()

    <% String basePath = request.getScheme() + "://" + request.getServerName() + ":&qu ...

  7. linux邮件服务

    linux本地常见邮件服务有: Centos5:默认使用sendmail邮件服务,开启方式/etc/init.d/sedmail start Centos6:默认使用postfix邮件服务,开启方式/ ...

  8. salt 根据ip修改主机名

    首先定义pillar [root@web1 pillar]# cat hostname.sls ip_hostname: 10.1.1.1: web1 10.1.1.2: web2 10.1.1.3: ...

  9. lucene_04_解析语法查询

    解析语法查询就是调用方法查询的原始查询 例如: 查询所有的查询器的语法为:*:*,因为lucene查询是根据term来做的,既是:key:value类型.*:*表示所有域中的所有值. api调用语法解 ...

  10. Spring Cloud Sleuth(十四)

    作用 再微服务中 服务调用服务很常见.服务中相互调用链路追踪的尤为重要,能够帮助我们再异常时分析出哪个服务出了异常.以及各个链路中相互调用所消耗时间,通过这些数据能够帮助我们分析出各个服务的性能瓶颈 ...