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. 阿里云，未找到或无法访问服务器.请验证实例名称是否正确并且 SQL Server 已配置为允许远程连接.

    阿里云主机使用SQL Server作为数据库服务器,连接数据库时候出现错误. 按照网上经验,检查SQL服务是否开启,sa用户权限,数据库安全性和连接权限: 关闭服务器防火墙,修改入站规则: 检查阿里云 ...

  2. C++反汇编（一）

    对象/结构体 对象的大小只包括数据成员,成员函数属于执行代码. 对象长度 = sizeof(数据成员1) + sizeof(数据成员2) + ...... + sizeof(数据成员n) 特殊情况公式 ...

  3. post推送消息时的乱码

    URL realUrl = new URL(url); // 打开和URL之间的连接 URLConnection conn = realUrl.openConnection(); // 设置通用的请求 ...

  4. Openvswitch手册(7): Interfaces

    我们来看Interfaces ofport: OpenFlow port number for this interface. type: system: An ordinary network de ...

  5. VSCode插件开发全攻略（九）常用API总结

    更多文章请戳VSCode插件开发全攻略系列目录导航. 本文提炼一些常见的API使用场景供参考,本文内容有待完善. 编辑器相关 修改当前激活编辑器内容 替换当前编辑器全部内容: vscode.windo ...

  6. 一篇入门 -- Scala 反射

    本篇文章主要让大家理解什么是Scala的反射, 以及反射的分类, 反射的一些术语概念和一些简单的反射例子. 什么是反射 我们知道, Scala是基于JVM的语言, Scala编译器会将Scala代码编 ...

  7. web安全学习规划指南

    课程信息 难易程度:中级 学习人数:5078人 已完结:共1节 时长:14分钟 课程介绍 黑客进攻真的会像电影里一样敲几行命令屏幕闪动过后就可以控制目标服务器的么?其实大部分时间黑客是在寻找网站应用的 ...

  8. PHP实现大文件下载

    实现大文件下载的关键在于循环读取字节流 function downloadFile($filename) { //获取文件的扩展名 $allowDownExt = array ( 'rar', 'zi ...

  9. 实现文件上传 你get了吗？？？

    实现文件上传: 1.jar包 需要用到两个jar包: commons-io.jar commons-fileupload.jar 下载地址:https://mvnrepository.com/ 2.f ...

  10. numpy创建矩阵常用方法

    numpy创建矩阵常用方法 arange+reshape in: n = np.arange(0, 30, 2)# start at 0 count up by 2, stop before 30 n ...