[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" ...
随机推荐
- lambada
一.动态创建 ParameterExpression parameter = Expression.Parameter(typeof(User), "u"); //创建委托 Mem ...
- jquery.ocupload上传文件到指定目录
首先引入两个js <script type="text/javascript" src="${pageContext.request.contextPath }/r ...
- 架构(四)Git简介,安装以及相关命令SourceTree
一 Git介绍 1.1 Git是什么? Git是一个分布式版本控制软件: 版本控制:假如开发人员开发了一个a功能,结果项目经理觉得不够需要修改,开发人员又改成了b功能,后来又改成了c功能,但是最终项目 ...
- HashTable使用举例--C#
一,哈希表(Hashtable)简述 在.NET Framework中,Hashtable是System.Collections命名空间提供的一个容器,用于处理和表现类似keyvalue的键值对,其中 ...
- Python面向对象1:类与对象
Python的面向对象- 面向对象编程 - 基础 - 公有私有 - 继承 - 组合,Mixin- 魔法函数 - 魔法函数概述 - 构造类魔法函数 - 运算类魔法函数 # 1. 面向对象概述(Objec ...
- 微信小程序设置web-view的业务域名
微信小程序设置web-view的业务域名 域名必备 你的域名必须要备案过 你的域名必须是https,而不能是http web-view 在小程序后台添加业务域名,只解析业务域名中的url网页地址的. ...
- 第54节:Java当中的IO流(中)
Java当中的IO流(中) 删除目录 // 简书作者:达叔小生 import java.io.File; public class Demo{ public static void main(Stri ...
- 《http权威指南》读书笔记12
概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...
- python zeros用法实例
编程就是踩坑的过程.今天又踩了一个坑,做个积累吧. 在给数组赋初始值的时候,经常会用到0数组,而Python中,我们使用zero()函数来实现.在默认的情况下,zeros创建的数组元素类型是浮点型的, ...
- Python - GUI(Graphical User Interface,图形用户界面)
Tkinter https://docs.python.org/3/library/tkinter.html Python自带的标准GUI库,可用于快速创建GUI应用程序,能够满足基本的GUI程序要求 ...