angular中的ng-click指令案例
<!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指令案例的更多相关文章
- Angular中的内置指令和自定义指令
NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...
- Angular中ui-router实现路由嵌套案例
学习 ui-router 资料整理 对于Angular内置的路由是单路由视图,ui-router可以实现路由嵌套.后面将会有一个案例概括前面所有资料整理 学习 ui-router - 管理状态 ht ...
- angular中要注意的指令
1.ng-repeat 遍历集合,给每个元素生成模板实例,每个实例的作用域中可以用一些特殊属性,如下: $index //遍历集合的下标 $first //遍历集合中的第一个对象 $last //遍历 ...
- 在angular7中创建组件/自定义指令/管道
在angular7中创建组件/自定义指令/管道 组件 使用命令创建组件 创建组件的命令:ng generate component 组件名 生成的组件组成: 组件名.html .组件名.ts.组件名. ...
- Angular 组件与模板 - 属性指令
指令概览 在 Angular 中有三种类型的指令: 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 — 改变元素.组件或其它指令的外观和行为 ...
- angular中的MVVM模式
在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(What ...
- angular中的服务
angular中的服务 angular中的服务相当于一个状态管理,可以将数据放在服务里面进行获取以及编辑. 服务的安装命令: ng g service count 安装好后,会在服务的ts文件中引入一 ...
- Angular中的数据绑定
(1)HTML绑定:{{}} (2)属性绑定:[] 注意:属性绑定通常赋值为变量,如果赋值为常量(如字符串常量) 必须用引号括起来,如<img [src]="'../../assets ...
- 在 Angular 中实现搜索关键字高亮
在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
随机推荐
- TensorFlow学习笔记----安装（1）
在入门前,推荐一个博客链接:https://morvanzhou.github.io/tutorials/machine-learning/tensorflow/ Windows下tensorflow ...
- eas之action的创建
protected KDWorkButton btnFileManage; protected ActionFileManage actionFileManage = null; pub ...
- js-2018-11-09 关于Array中的srot()方法和compare()方法
Array中的srot()方法 sort()方法是用来重排序的方法.在默认情况下,sort()方法按升序排列数组项----即最小的值位于最前面,最大的值排在最后面. 我们看看官方是怎么说的: arra ...
- [luogu4290 HAOI2008]玩具取名(DP)
传送门 Solution 裸区间DP Code #include <map> #include <cmath> #include <cstdio> #include ...
- CSS 利用transform达到居中效果
<body> <div class="center"> .... </div> </body> 让left和top都是50%,这在水 ...
- Spring Boot项目@RestController使用重定向redirect
Spring MVC项目中页面重定向一般使用return "redirect:/other/controller/";即可.而Spring Boot使用了@RestControll ...
- rabbitmq安装、集群搭建
rabbitmq的安装: CentOS上面部署: 首先修改hosts文件 修改hosts文件vi /etc/hosts1.1.1.1 hostname 2.2.2.2 hostname 3.3.3.3 ...
- 如何用arcgis进行WGS84的投影坐标变换
转自原文 如何用arcgis进行WGS84的投影坐标变换 通常情况下,要求WGS 84下的投影坐标,选择UTM投影. 1.UTM投影 UTM投影全称为“通用横轴墨卡托投影”UNIVERSAL TRAN ...
- 问题3-Error occurred during initialization of VM Could not reserve enough space for object heap
初步断定是内存方面的问题 于是决定修改配置文件 D:\study\eclipse\eclipse\eclipse.ini -startupplugins/org.eclipse.equinox.lau ...
- 认证 协议 JWT OAuth Session Cookie
本文翻译自Auth-Boss. 如果有翻译的不恰当或不对的地方, 欢迎指出. 成为一个认证老司机, 了解网络上不同的身份认证方法. 本文档的目的是记录和编目Web上的身份验证方法.认证指的是创建一个系 ...