1.ng-click指令:定义了AngularJS点击事件

<div ng-app="" ng-controller="myCtrl">

<button ng-click="count=count+1">点我!</button>

<p>{{count}}</p>

</div>

2.隐藏HTML元素:

**ng-hide指令用于设置应用部分是否可见

**ng-hide="true"设置HTML元素不可见

**ng-hide="false"设置HTML元素可见

<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">隐藏/显示</buttton>

<p ng-hide="myVar">           //ng-hide指令设置<p>元素及两个输入域是否可见,根据myVar的值(true或false)来设置是否可见

名:<input type="text" ng-model="firstName"><br>

姓名:<input type="text" ng-model="lastName"><br>

<br>

Full Name:{{firstName+" "+lastName}}

</p>

<script>

var app=angular.module('myApp',[]);

app.controller('personCtrl',function($scope){

  $scope.firstName="John",

  $scope.lastName="Doe",

  $scope.myVar=false;

  $scope.toggle=function(){                            //toggle()函数用于切换myVar变量的值(true或false)

    $scope.myVar=!$scope.myVar();

  }

});

</script>

</div>

3.显示HTML元素:ng-show指令用于设置应用中的一部分是否可见;

**ng-show="false"可以设置HTML元素不可见

**ng-show="True"可以设置HTML元素可见

<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-show="myVar">

名:<input type="text" ng-model="firstName"><br>

姓名:<input type="text" ng-model="lastName"><br>

<br>

姓名:{{firstName+" "+lastName}}

</p>

</div>

<script>

var app=angular.module('myApp',[]);

app.controller('personCtrl',function($scope){

  $scope.firstName="John",

  $scope.lastName="Doe"

  $scope.myVar=true;

  $scope.toggle=function(){

    $scope.myVar=! $scope.myVar;

  }

});

</script>

AngularJS 学习之事件的更多相关文章

  1. angularjs学习笔记—事件指令

    ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click=" ...

  2. angularJS学习资源最全汇总

    基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...

  3. 我的AngularJS 学习之旅

    我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例   很早之前就 ...

  4. AngularJs学习总结-了解基本特性(-)

    现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...

  5. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  6. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  7. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  8. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  9. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

随机推荐

  1. HTML中表格元素TABLE,TR,TD及属性的语法

    table:表格元素及属性 <table width="80%" border="1" cellspacing="1" cellpad ...

  2. 20145213祁玮のJava课程总结

    20145213のJava学习总结 每周学习笔记 1.第一周读书笔记 2.第二周读书笔记 3.第三周读书笔记 4.第四周读书笔记 5.第五周读书笔记 6.第六周读书笔记 7.第七周读书笔记 8.第八周 ...

  3. 【XLL API 函数】xlSheetId

    查找命名的工作表ID,用于外部引用. 原型 Excel12(xlSheetId, LPXLOPER12 pxRes, 1, LPXLOPER12 pxSheetName); 参数 pxSheetNam ...

  4. js生成验证码并验证

    前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.as ...

  5. Hibernate单向一对多对象关系模型映射

    1 hibernate 的对象关系映射 Orm: 类-----表 属性------字段 对象------记录 表:在数据库中存在主外键的关系,反向工厂类是由表生成,在由表生成类的时候,类和类之间存在者 ...

  6. iOS键盘监听的通知

    #pragma mark - 键盘通知回调方法 //  监听键盘的通知 [[NSNotificationCenter defaultCenter] addObserver:self selector: ...

  7. 解决eclipseMavne的web项目debug时没有源码

  8. 大数计算_BigNum优化_加减乘除乘方取余_带注释_数组

    #include <iostream> #include <algorithm> #include <cstring> #include <cstdlib&g ...

  9. bootstrap垂直下拉菜单默认展开

    HTML: <div class="col-md-3"> <nav class="navbar"> <div class=&quo ...

  10. JPush集成

    JPush SDK 收到推送,通过广播的方式,转发给开发者App,这样开发者就可以灵活地进行处理. 这个动作不是必须的.用户有需要才定义 Receiver 类来处理 SDK过来的广播. 如果不做这个动 ...