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. MATLAB2016a安装破解教程

    首先,下载软件:下面是某博主的分享,可以下载软件. 链接:https://pan.baidu.com/s/1i6BgD8p       密码:17gg  第一步:安装软件 1,下载文件,得到R2016 ...

  2. 133. leetcode-Clone Graph

    拷贝图,可以一边遍历一边拷贝 DFS class Solution { public: Node* cloneGraph(Node* node) { unordered_map<int, Nod ...

  3. Xcode中SVN不能提交.a文件的解决方法

    我是搬运工!!!方便自己使用!!! 方案一: 在mac下很多svn管理工具默认都不能上传.a文件,这让人很苦恼.从网上扒了下,用命令行可以解决此问题. 打开终端,cd 进入到需要上传的.a文件所在的文 ...

  4. 有关wkwebview和UIwebview获取html中的标签方法

    wkwebview方法如下: [webView evaluateJavaScript:@"navigator.userAgent" completionHandler:^(id r ...

  5. IDEA环境下GIT操作浅析之一Idea下仓库初始化与文件提交涉及到的基本命令

    目标总括 idea 下通过命令操作文件提交,删除,与更新并推送到github 开源库基本操作idea 下通过命令实现分支的创建与合并操作 idea 下通过图形化方式实现idea 项目版本控制基本操作 ...

  6. MySQL-8.0.11 在 Windows10 上的安装

    下载 MySQL8.0 For Windows zip包下载地址:https://dev.mysql.com/downloads/file/?id=476233. 进入页面后可以不登录,点击底部“No ...

  7. Matplotlib 使用 - 《Python 数据科学手册》学习笔记

    一.引入 import matplotlib as mpl import matplotlib.pyplot as plt 二.配置 1.画图接口 Matplotlib 有两种画图接口: (1)一个是 ...

  8. KNN和SVM的区别和联系

    先从两者的相同点来看吧,两者都是比较经典的机器学习分类算法,都属于监督学习算法,都对机器学习的算法选择有着重要的理论依据. 区别: 1 KNN对每个样本都要考虑.SVM是要去找一个函数把达到样本可分. ...

  9. 数据库语句收藏（MySQL）

    概览 => MySQL是一种关系数据库管理系统,关系数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内,这样就增加了速度并提高了灵活性. =>关键字不区分大小写 => S ...

  10. 神奇的CSS3混合模式

    神奇的css3混合模式 对于前端开发人员应该都很熟悉Photoshop的图层混合模式,就是几个图层按不同的模式进行混合,实现不同的图像效果.但是当我们前端同学在切这些效果图的时候,基本上就是一刀切的, ...