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. C++ 一些特性

    1.  初始化列表std::initializer_list,头文件<initializer_list> C++11提供了模板类template<class T> class ...

  2. 《Java性能调优》学习笔记（1）

    性能的参考指标 执行时间 -- 从代码开始运行到结束的时间 CPU时间 -- 函数或者线程占用CPU的时间 内存分配 -- 程序在运行时占用内存的情况 磁盘吞吐量 -- 描述IO的使用情况 网络吞吐量 ...

  3. eclipse安装及配置pydev

    1.首先安装jre,这里记住jre的安装目录,32位操作系统默认安装在“C:\Program Files (x86)\Java\jre1.8.0_91” 2.配置eclipse,这里使用的是压缩包不需 ...

  4. Python编程练习：使用 turtle 库完成叠边形的绘制

    绘制效果: 源代码: # 叠边形 import turtle turtle.setup(650,350,200,200) turtle.penup() turtle.fd(-100) turtle.l ...

  5. Android 自定义 View 绘制

    在 Android 自定义View 里面,介绍了自定义的View的基本概念.同时在 Android 控件架构及View.ViewGroup的测量 里面介绍了 Android 的坐标系 View.Vie ...

  6. 吴恩达机器学习笔记14-逻辑回归(Logistic Regression)

    在分类问题中,你要预测的变量

  7. 第79节:Java中一些要点

    第79节:Java中一些要点 前言 一些知识点忘了没,可以通过一个点引出什么内容呢?做出自己的思维导图,看看自己到了哪一步了呢 内容 如果有人问jre,jdk,jvm是什么,你怎么回答呢? jre的英 ...

  8. 如何解决微信小程序界面适配问题-引用-生命周期回调函数-优化机制-样式引入

    如何解决微信小程序界面适配问题 .wxss page{ height: 100%; width:750rpx; } this.setData({ imageWidth: wx.getSystemInf ...

  9. Ubuntu下录制和制作Gif图片--实战版

    1.背景 ubuntu下,写文章的时候,经常用到Gif图片,这个自己怎么制作呢? 网上查了一下资料,大致的流程就是:安装 录屏软件(kazam) 和 视频 转 Jpeg 的工具(mplayer) ,使 ...

  10. 毕业不到一年，绩效打了个D！

    周末了,和大家来聊聊程序员工作态度的问题. 说说栈长的事迹吧,这是好多年前的事了,那时候,栈长才毕业不到一年,那次绩效打了个D!事后,我很气愤啊,我那时还在博客上写文章怒骂了部门经理,现在想起来,真是 ...