[angularjs] angularjs系列笔记（八）事件
AngularJs有自己的HTML事件
ng-click指令
ng-click指令定义了AngularJs点击事件
当点击按钮的时候，赋值count变量并且给count变量加1，显示出count变量
<body>
<div ng-app="Home"> <div ng-controller="ngClickTest">
测试ng-click指令
<button ng-click="count=count+1">点击</button>
{{count}}
</div>
</div> </body> <script type="text/javascript">
//实例化应用对象，参数：模块名，空数组
var app=angular.module("Home",[]);
app.controller("ngClickTest",function(){})
</script>
ng-click指令结合ng-hide显示隐藏html
给ng-click指令绑定一个函数，给ng-hide指令赋值一个变量，在控制器中分配默认变量和分配函数
<body>
<div ng-app="Home"> <div ng-controller="ngClickTest">
测试ng-click指令
<button ng-click="toggle()">点击</button>
<div ng-hide="flag">
姓名：{{name}}
</div>
</div>
</div> </body> <script type="text/javascript">
//实例化应用对象，参数：模块名，空数组
var app=angular.module("Home",[]);
//调用app对象的controller方法，参数：控制器名，匿名函数
app.controller("ngClickTest",function($scope){
//分配变量
$scope.name="陶士涵";
$scope.flag=false;
//分配过去一个函数
$scope.toggle=function(){
//函数起到的作用
$scope.flag=!$scope.flag;
}
})
</script>
[angularjs] angularjs系列笔记（八）事件的更多相关文章
- AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...
- AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...
- AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，获取路由参数，路由的Resolve
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...
- AngularJS路由系列(6)-- UI-Router的嵌套State
本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...
- AngularJS路由系列(3)-- UI-Router初体验
本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...
- AngularJS路由系列(1)--基本路由配置
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 路由的Big Picture ● $routeProvider配置路由 ● 使用template属性 ● 使用temp ...
- angularjs自动化测试系列之jasmine
angularjs自动化测试系列之jasmine jasmine参考 html <!DOCTYPE html> <html lang="en"> <h ...
- angularjs自动化测试系列之karma
angularjs自动化测试系列之karma karma test with jasmine 更好的利用工具是为了让生活更美好. 需要安装的东西: npm install karma -g mkdir ...
- AngularJS中的DOM与事件
前 言 AngularJS中的DOM与事件 AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled="true/false" ...
随机推荐
- Python之路【第五篇】函数
4.1 函数的定义 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 4.2 函数的创建 函数名的命名规则: 1.函数名必须以下划线或字母开头,可以包含任 ...
- 一、Java和JavaScript
JavaScript诞生于1995年,所以他得叫我一声姐姐,(*^__^*) .当时它的主要任务就是表单验证,在还没JavaScript的时候,进行表单验证的时候必须要把数据提交到服务器,才能进行表单 ...
- 高手养成计划基础篇-Linux第二季
高手养成计划基础篇-Linux第二季 本文来源:i春秋社区-分享你的技术,为安全加点温度 前言 前面我们学习了文件处理命令和文件搜索命令,简单的了解了一下Linux,但是仅仅了解这样还不行,遇 ...
- Javascript高级编程学习笔记（37）—— DOM（3）Element
Element类型 除了Document类型之外,Element类型应该就是web编程中最常用的类型了 Element类型主要用于表现XML.HTML元素,提供对元素标签名.子节点以及特性的访问 特性 ...
- IDEA远程Debug
进行远程debug是我们排查线上bug的一个最常用的工具,本篇博文就简单介绍一下如何使用IDEA来进行远程debug 1. 修改Tomcat配置文件 修改bin目录下的catalina.sh文件,在文 ...
- php中的一些不常见的问题foreach/in_array[开发篇]
php在开发效率很高,这是无可厚非的,但是却是在牺牲执行效率的.php数组功能非常强大,但是也要多加考虑,多试几种情况情况,以防万一,这里,我就简单的说两个遇到的坑,以后如果有发现更多的,再补上吧! ...
- 排序函数 sort() 和 高阶函数sorted()
· sorted():该函数第一个参数iterable为任意可以迭代的对象,key是用于比较的关键字,reverse表示排序结果是否反转. · L.sort():该函数的三个参数和 sorted() ...
- iTerm2 使用笔记
iTerm2 使用了1年多了,一些功能其实还没有主动去发现,这次接着项目忙完的空闲时间整理一下tips,提高工作效率,方便以后查阅. 一.几个术语 从小到大:session > pane > ...
- Python的GUI编程（TK）
TK在大多数 Unix平台.Windows平台和Macintosh系统都是预装好的,TKinter 模块是 Tk GUI 套件的标准Python接口.可实现Python的GUI编程. Tkinter模 ...
- 冒泡 MS Azure 不便宜。。。
一直在等 MS Azure 中国开卖, 最近有消息说正式商用了... 看看去,ok 发现官方网站 很奇葩.没有购买的地方 说毛线 啊 卧槽 欺骗感情还是吊人胃口? 好看了一下VM的价格,卧槽真不便宜. ...