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系列笔记(八)事件的更多相关文章

  1. AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...

  2. AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...

  3. AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式,获取路由参数,路由的Resolve

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...

  4. AngularJS路由系列(6)-- UI-Router的嵌套State

    本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...

  5. AngularJS路由系列(3)-- UI-Router初体验

    本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...

  6. AngularJS路由系列(1)--基本路由配置

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 路由的Big Picture ● $routeProvider配置路由 ● 使用template属性 ● 使用temp ...

  7. angularjs自动化测试系列之jasmine

    angularjs自动化测试系列之jasmine jasmine参考 html <!DOCTYPE html> <html lang="en"> <h ...

  8. angularjs自动化测试系列之karma

    angularjs自动化测试系列之karma karma test with jasmine 更好的利用工具是为了让生活更美好. 需要安装的东西: npm install karma -g mkdir ...

  9. AngularJS中的DOM与事件

      前 言 AngularJS中的DOM与事件   AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令.  ng-disabled="true/false" ...

随机推荐

  1. Redis-02.数据类型

    Redis中所有数据都是以key-value存储的,value支持的数据类型包括string.hash.list.set.sorted_set 数据类型 string 是redis最基本的类型,一个k ...

  2. 【.NET Core项目实战-统一认证平台】第四章 网关篇-数据库存储配置(2)

    [.NET Core项目实战-统一认证平台]开篇及目录索引 上篇文章我们介绍了如何扩展Ocelot网关,并实现数据库存储,然后测试了网关的路由功能,一切都是那么顺利,但是有一个问题未解决,就是如果网关 ...

  3. 探讨npm依赖管理之peerDependencies

    引言 想必前端同学对npm的devDependencies和dependencies都比较熟悉,但是对peerDependencies可能就有点陌生,尤其是没有写过npm包插件的同学,比如之前使用gr ...

  4. 页面css样式找不到问题

    出现了一个页面没有样式的问题: 问题: 1.路径不对, 可以打开页面f12看样式是否找到 检查路径是否正确. 2.样式没引全或者没引对. 查看引入的样式是否正确或缺少样式. 3.路径明明写对了却404 ...

  5. 【雷神源码解析】无基础看懂AAC码流解析,看不懂你打我

    一 前言 最近在尝试学习一些视频相关的知识,随便一搜才知道原来国内有雷神这么一个真正神级的人物存在,尤其是在这里(传送门)看到他的感言更是对他膜拜不已,雷神这种无私奉献的精神应当被我辈发扬光大.那写这 ...

  6. 利用vi编辑器创建和编辑正文文件(一)

    1.       vim是vi的升级版本. 2.       vi所UNIX和Linux系统内嵌的标准文编辑器,可执行,修改,复制,移动,粘贴和删除正文等命令,也可以进行移动光标,搜索字符和退出vi的 ...

  7. sql server 性能调优之 CPU消耗最大资源分析1 (自sqlserver服务启动以后)

    一. 概述 上次在介绍性能调优中讲到了I/O的开销查看及维护,这次介绍CPU的开销及维护, 在调优方面是可以从多个维度去发现问题如I/O,CPU,  内存,锁等,不管从哪个维度去解决,都能达到调优的效 ...

  8. Ambari集群移动现有复制到另外地方或更改ip地址,导致各项服务组件上为黄色问号代表心跳丢失的解决方案(图文详解)(博主推荐)

    前言 最近,是在做集群搬移工作,大家肯定会遇到如下的场景. (1) 比如,你新购买的电脑,初步者学习使用Ambari集群.从旧电脑复制到新电脑这边来. (2) 比如,你公司Ambari集群的ip,因业 ...

  9. [Web安全之实战] 跨站脚本攻击XSS

    Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket Reprint it anywhere u want. 文章Points:  1. 认识XSS 2. ...

  10. Servlet & JSP系列文章总结

    前言 谢谢大家的捧场,真心感谢我的阅读者. @all 下一期,重点在  数据结构和算法  ,希望给大家带来开心.已经出了几篇,大家爱读就是我的开心. Servlet & JSP系列总结 博客, ...