<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ng-showAndng-hide</title>
<script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
</head>

<body>

　　<div ng-app="You" ng-controller="ctrl">
　　　　<div>I'm jiao Dashu and I'm leaning H5 on the school{{title}}</div>
　　　　<div><input type="text" ng-model="title"></div>
　　　　<div><input type="text" ng-value="title"></div>
　　　　<button ng-click="toggle()">show/hidden</button>
　　　　<div style="width: 200px;height: 150px;border:1px solid #ccc;" ng-show="isShow">This is a long adver !</div>
　　　　<button ng-click="toggleDisabled()">toggle the state of input</button>
　　　　<div><input type="text" ng-disabled="isDisabled"></div>
　　</div>

　　<div ng-app="Repeat" ng-controller="ctrl">
　　　　<ul>
　　　　　　<!--ng-class-odd/ng-class-even"没出来效果-->

　　　　　　<li ng-repeat="v in data" ng-class-odd="{red:true}" ng-class-even="{blue:true}">ID:{{v.id}}:{{v.title}}(click number:{{v.click}})</li>
　　　　</ul>
　　　　<div ng-style="{color:'red',fontSize:'30px'}">this is a things long long ago！</div>
　　　　<button ng-click="fn()">click</button><button ng-dblclick="fn()">doubleClick</button>
　　　　<input type="text">
　　</div>

　　<form ng-app="Submit" ng-controller="ctrl" name="qianfeng">
　　　　<input type="text" name="title" ng-model="title" ng-trim="false">专注{{title}}移动端研发
　　　　<input type="text" ng-model="content">
　　　　<input type="submit" value="提交">
　　</form>

　　<select ng-app="Select" ng-controller="ctrl" ng-model="current" ng-options="v.value as v.name for v in data"></select>

　　<div ng-app="demo" ng-controller="ctrl">
　　　　<input type="checkbox" ng-model="ball.basketball" ng-ture-value="1"  ng-false-value="0">篮球<input type="checkbox" ng-model="ball.football" ng-true-value="1" ng-false-value="0">足球
　　　　<div ng-if="ball.basketball==1">喜欢篮球的原因：<textarea style="height: 100px;width: 300px;"></textarea></div>
　　　　<div ng-if="ball.football==1">喜欢足球的原因：<textarea style="height: 100px;width: 300px;"></textarea></div>
　　</div>

　　　　<div ng-app="angularJS1" ng-controller="ctrl">
　　　　　　商城状态：<input type="radio" ng-model="status" value="1">打开<input type="radio" ng-model="status" value="0">关闭
　　　　　　<textarea style="width: 300px;height: 200px;" ng-show="status==0">商城正在系统升级，给你带来不便，敬请谅解，1个月后再来访问吧</textarea>

　　　　</div>

　　　　<div ng-app="angularJS" ng-controller="ctrl">商品名称：{{data.title}},商品价格：{{data.price}},商品数量：<button ng-click="decrease()">-</button><input type="text" name="text" ng-model='data.num'><button ng-click="increase()">+</button>,商品总价：{{data.price*data.num}},数量：{{data.num}}
　　　　　　<br>
　　　　　　<input type="text" name="text" ng-model="name"><br>
　　　　　　<input type="text" name="text" ng-model="name">
　　　　　　<form>
　　　　　　　　商品名称：<input type="text" name="text" ng-model="data.title">
　　　　　　　　商品价格：<input type="text" name="text" ng-model="data.price">
　　　　　　　　商品数量：<input type="text" name="text" ng-model="data.num">
　　　　　　　　商品总价：<input type="text" name="text" ng-value="data.num*data.price">
　　　　　　</form>

　　　　</div>

<script>

　　　　let m=angular.module('You',[]);
　　　　m.controller('ctrl',['$scope',function($scope){
　　　　　　$scope.title="The 1000phone education";
　　　　　　$scope.isShow=true;
　　　　　　$scope.toggle=function(){
　　　　　　　　$scope.isShow=!$scope.isShow;
　　　　　　}
　　　　　　$scope.isDisabled=true;
　　　　　　$scope.toggleDisabled=function(){
　　　　　　　　$scope.isDisabled=!$scope.isDisabled;
　　　　　　}

　　　　}]);

　　　　var m=angular.module('Repeat',[]);
　　　　m.controller('ctrl',['$scope',function($scope){
　　　　　　$scope.data=[{
　　　　　　　　　　　　　　id:1,
　　　　　　　　　　　　　　title:"this is first news",
　　　　　　　　　　　　　　click:5
　　　　　　　　　　　　　},{
　　　　　　　　　　　　　　id:2,
　　　　　　　　　　　　　　title:"this is second news",
　　　　　　　　　　　　　　click:15
　　　　　　　　　　　　　},{
　　　　　　　　　　　　　　id:3,
　　　　　　　　　　　　　　title:"this is third news",
　　　　　　　　　　　　　　click:7
　　　　　　　　　　　　　},{
　　　　　　　　　　　　　　id:4,
　　　　　　　　　　　　　　title:"this is fourth news",
　　　　　　　　　　　　　　click:89
　　　　　　　}];
　　　　　　$scope.fn=function(){
　　　　　　　　alert("Don't close me ! please...");
　　　　　　}
　　　　}]);

　　　　let m=angular.module('Submit',[]);
　　　　m.controller('ctrl',['$scope',function($scope){
　　　　　　$scope.title="千疯教育";
　　　　　　$scope.content="上海H51615班级第二阶段的学习快结束啦！";
　　　　　　var oQianfeng=document.qianfeng;
　　　　　　oQianfeng.onsubmit=function(){
　　　　　　　　console.log(this.title.value.length);
　　　　　　　　console.log($scope.title.length);
　　　　　　};
　　　　}]);

　　　　var m=angular.module('Select',[])
　　　　m.controller('ctrl',['$scope',function($scope){
　　　　　　$scope.current="1";
　　　　　　　　$scope.data=[{
　　　　　　　　　　　　　　name:"刘德华",
　　　　　　　　　　　　　　value:"1"
　　　　　　　　　　　　},{
　　　　　　　　　　　　　　name:"张学友",
　　　　　　　　　　　　　　value:"2"
　　　　　　　　　　　　},{
　　　　　　　　　　　　　　name:"郭富城",
　　　　　　　　　　　　　　value:"3"
　　　　　　　　　　　　},{
　　　　　　　　　　　　　　name:"黎明",
　　　　　　　　　　　　　　value:"4"
　　　　　　　　}];
　　　　}])

　　　　let m=angular.module('demo',[]);
　　　　m.controller('ctrl',['$scope',function($scope){
　　　　　　$scope.ball={football:0,basketball:0};
　　　　}])

　　　　var m=angular.module('angularJS1',[]);
　　　　m.controller('ctrl', ['$scope', function ($scope) {
　　　　　　　　$scope.status=1;
　　　　}])

　　　　//第一步创建模块，包括模块名字和一个空数组
　　　　let m=angular.module('angularJS',[]);
　　　　//第二步，创建一个控制器，包括控制器名字和一个数组，数组里包括视图(从后台获取数据的东西)名字和一个函数
　　　　m.controller('ctrl',['$scope',function($scope){
　　　　　　$scope.data={
　　　　　　　　id:1,
　　　　　　　　title:"苹果",
　　　　　　　　price:18,
　　　　　　　　num:1
　　　　　　};
　　　　　　$scope.decrease=function(){
　　　　　　　　if($scope.data.num>0) $scope.data.num--;
　　　　　　}
　　　　　　$scope.increase=function(){
　　　　　　　　$scope.data.num++;
　　　　　　}
　　　　　　$scope.name='京东商城';

　　　　}])

</script>
</body>

</html>

　　　　/*AngularJS指令及注释*/
　　　　1,ng-bind;//ng-bind与表达式{{}}是同一种工具，都能将数据插入到页面中，当数据后面的字符串比较长时使用{{}},但是当使用表达式{{}}，网速比较慢的时候页面会有{{}}闪退，解决办法是加class="ng-cloak",再在css中让其none".ng-cloak{display:none}"即可解决；注：不能用于form表单
　　　　2,ng-cloak;
　　　　3,ng-model;//其指令中的值发生变化以后，会及时更新到$scope中，$scope中的值发生变化以后，则重新解析页面中使用到该指令的值
　　　　4,ng-value;//用于设置form表单或select中的value值，不会发生双向绑定
　　　　5,ng-show;//原理是通过控制css样式确定元素是否显示
　　　　6,ng-hide;
　　　　7,ng-if;//控制元素是否显示，原理是将元素从DON节点中删除
　　　　8,ng-disabled;//控制表单是否禁止使用
　　　　9,ng-repeat;//按值索引，并非按下标索引，当数组中有重复的数据时，必须指定no-repeat='v in shops track by $index',否则报错;$index是ng自带的变量，表示当前数据的下标值
　　　　10,ng-selected;//指定被选中的option标签元素，为true时表示选中当前标签
　　　　11,ng-readonly/ng-disabled;//禁止用户修改表单元素,使用disabled属性的表单数据不能提交到后台，而使用readonly属性的表单数据是可以提交到后台的；
　　　　12,ng-checked;//表示表单元素是否被选中
　　　　13,ng-class/ng-class-odd/ng-class-even;//ng-class绑定angular数据，指令的值为Json对象，如果属性为true,则使用对应属性名的class样式；ng-class-odd/ng-class-even奇偶数行应用的类
　　　　14,ng-style;//设置行级样式
　　　　15,ng-click='';ng-change=''(必须指定ng-model,否则报错)；ng-dblclick;ng-keydown;ng-keyup;ng-keypress;ng-mousedown;ng-mouseup;ng-mousemove;//事件处理指令,格式：ng-click="fn()(函数名)"
　　　　16,ng-init;//不常用，执行给定的表达式
　　　　17,ng-trim;//指令用来设置是否打开自动移除字符串两侧的空白字符；注：a：ng-model指令会自动移除文本框内容两侧的空白字符，而不会移除密码框内容两侧的空白字符，如不需要该功能，则设置ng-trim指令值为false；b：ng-model只会移除文本框内容帮定到$scope对象属性上的值的两侧空白字符，而文本框的value值还是会包含两侧的空白字符；
　　　　18,ng-true-value;//用于设置复选框被选中时的值。
　　　　19,ng-false-value;//指令用于设置复选框取消选中时的值，如果没有使用这两个指令设置，那么选中复选框时的值为true，取消选中时的值为false。
　　　　20,ng-options;//指令用于构建select下拉列表，被选中的值需要存储到ng-model指令指定的变量中;

Angular.js之指令学习笔记的更多相关文章

  1. 关于Angular.js Routing 的学习笔记(实现单页应用)

    最近开始学习angular.js,发现angular.js确实很方便,也很强大.在看到 AngularJS Routing and Multiple Views 这一部分的时候,有点乱.现在通过记录一 ...

  2. Angular.js之Router学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. Angular.js之自定义指令学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. 【09-23】js原型继承学习笔记

    js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...

  5. Underscore.js 源码学习笔记（下）

    上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...

  6. Underscore.js 源码学习笔记（上）

    版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}());  这样的东西,我们应该知道这是一个 IIFE(立即执行 ...

  7. 浏览器中js执行机制学习笔记

    浏览器中js执行机制学习笔记 RiverSouthMan关注 0.0772019.05.15 20:56:37字数 872阅读 291 同步任务 当一个脚本第一次执行的时候,js引擎会解析这段代码,并 ...

  8. 纯JS实现KeyboardNav(学习笔记)一

    纯JS实现KeyboardNav(学习笔记)一 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码 预览地址 最终效果 KeyboardNav使用指南 ...

  9. 纯JS实现KeyboardNav(学习笔记)二

    纯JS实现KeyboardNav(学习笔记)二 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码 ...

随机推荐

  1. java系列--抽象类和接口

    问题:什么是接口,作用是什么 问题:什么是抽象类,作用是什么 一.抽象类 1.当父类的一些方法不确定时, 2.当一个子类继承的父类是抽象类的话,需要我们把抽象类中所有的抽象方法全部实现 3.抽象方法本 ...

  2. hdu 1005解题报告

    这道题目n的取值范围很大,1 <= n <= 100,000,000.因此肯定是需要优化才能AC. 首先我考虑到时是有没有通项公式,研究了一下,没发现什么东西,突然看到两个1时就想到会不会 ...

  3. 2.9. Scalar Properties for Primitive Data Types 选项（Core Data 应用程序实践指南）

    该选项的意思是,“用Scalar特性来表示原始数据类型”.什么意思,妈妈米呀,这是我学这门课程遇到的最难懂的概念. scalar properties,是复数,也就是说是 “分等级的属性”.那么,大概 ...

  4. Repeated Substring Pattern Leetcode

    Given a non-empty string check if it can be constructed by taking a substring of it and appending mu ...

  5. ThinkPHP框架开发的应用的标准执行流程

    用户URL请求 调用应用入口文件(通常是网站的index.php) 载入框架入口文件(ThinkPHP.php) 记录初始运行时间和内存开销 系统常量判断及定义 载入框架引导类(Think\Think ...

  6. MyBatis Generator 的使用

    1,以插件的形式加入到eclipse/dropins中: 2,设置mybatis-generator.xml文件: <?xml version="1.0" encoding= ...

  7. Boost.Asio技术文档

    Christopher Kohlhoff Copyright © 2003-2012 Christopher M. Kohlhoff 以Boost1.0的软件授权进行发布(见附带的LICENSE_1_ ...

  8. FMS中的onStatus

    在FlashCom中的Camera, Microphone, LocalConnection, NetConnection,NetStream和 SharedObject对象都提供了事件响应,onst ...

  9. 利用apache的mod_rewrite做URL规则重写

    使用mod_rewrite做url重写,伪静态,做过很多次,这次用几个例子记下来,便于后面查用. 使用方法: 1.在conf目录的httpd.conf文件中找到: LoadModule rewrite ...

  10. CSS页面渲染优化属性will-change

    前面的话   当我们通过某些行为(点击.移动或滚动)触发页面进行大面积绘制的时候,浏览器往往是没有准备的,只能被动使用CPU去计算与重绘,由于没有事先准备,应付渲染够呛,于是掉帧卡顿.而CSS属性wi ...