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. 12-Python操作json

    1.概述 Python操作json文件在测试中会经常用到,那么python怎么操作json文件呢,今天就来简单了解一下.Python中提供了dumps.dump.loads.load,用于字符串 和 ...

  2. Android Studio 调试各种国产手机经验总结

    为何加上“国产”二字呢,因为目前测试时就国产手机存在的安装问题多,而且都很奇葩,不得不说对于开发者时很不友好的. 下面就是个人总结的针对不同的机型调试时出现的问题做的总结: 1.VIVO 手机 解决方 ...

  3. Python学习笔记【第十四篇】：Python网络编程二黏包问题、socketserver、验证合法性

    TCP/IP网络通讯粘包问题 案例:模拟执行shell命令,服务器返回相应的类容.发送指令的客户端容错率暂无考虑,按照正确的指令发送即可. 服务端代码 # -*- coding: utf- -*- # ...

  4. Spring 实现事务的三种方式

    事务:保证数据的运行不会说A给B钱,A钱给了B却没收到. 实现事务的三种方式(重要代码): 1.aspectJ AOP实现事务: <bean id="dataSourceTransac ...

  5. jquery click嵌套 事件重复注册 多次执行的问题解决

    jquery click事件中嵌套click会重复注册内部的click事件,导致重复执行. 比如 $(...).click(function(){   $(...).click(function(){ ...

  6. mysql 开发进阶篇系列 10 锁问题 (相同索引键值或同一行或间隙锁的冲突)

    1.使用相同索引键值的冲突 由于mysql 的行锁是针对索引加的锁,不是针对记录加的锁,所以虽然是访问不同行的记录,但如果是使用相同的索引键,是会出现锁冲突的.设计时要注意 例如:city表city_ ...

  7. mysql 开发基础系列16 视图

    一. 什么是视图视图是一种虚拟存在的表,行和列数据来自,定义视图的查询中使用的表,并且是在使用视图时动态生成的.优势有: 简单: 使用视图的用户完全不需要关心后面对应的表的结构,关联条件,筛选条件. ...

  8. AndroidStudio意外崩溃，电脑重启，导致重启打开Androidstudio后所有的import都出错

    解决方案: File -> Invalidate Cashes / Restart 重新编译的时候可能会碰到下面的问题: 解决方案: 关闭Android Studio,删掉工程下的.gradle ...

  9. [译].NET Framework 4.8发布

    原文地址:https://devblogs.microsoft.com/dotnet/announcing-the-net-framework-4-8/ 我们很高兴地宣布今天发布.NET Framew ...

  10. clion调试postgresql

    clion怎么调试postgresql呢? clion使用cmake去编译项目的,但是大家编译postgresql用的是make.虽然项目中也有CMakeLists.txt文件,但是cmake会报错, ...