angular学习的一些小笔记(中)之基础ng指令
一、布尔属性指令:
ng-disabled:就是ng-disabled=true-->就指向不可用
<!doctype html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>
<input type="text" ng-model="someProperty" placeholder="Type to Enable">
<button ng-model="button" ng-disabled="!someProperty">A Button</button>
</body>
</html>
ng-checked:如上
<!doctype html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>
<label>someProperty = {{someProperty}}</label>
<input type="checkbox"
ng-checked="someProperty"
ng-init="someProperty = true"
ng-model="someProperty">
</body>
</html>
ng-readonly:如上,这个就跟上面一样的用法咯
ng-selected:如上
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body> <label>Select Two Fish:</label>
<input type="checkbox"
ng-model="isTwoFish"><br/>
<select>
<option>One Fish</option>
<option ng-selected="isTwoFish">Two Fish</option>
</select> <script>
angular.module('myApp', [])
</script> </body>
</html>
二、类布尔属性:
ng-href:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body> <!-- Always use ng-href when href includes an {{ expression }} -->
<a ng-href="{{myHref}}">I'm feeling lucky, when I load</a> <!-- href may not load before user clicks -->
<a href="{{myHref}}">I'm feeling 404</a> <script> angular.module('myApp', [])
.run(function($rootScope, $timeout) { $timeout(function() {
$rootScope.myHref = 'http://google.com';
}, ); })
</script> </body>
</html>
你运行这段代码就会发现,ng-href会执行$timeout,但是href不会。
ng-src:这个一样的道理
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body> <h1>Wrong Way</h1>
<img src="{{imgSrc}}" /> <h1>Right way</h1>
<img ng-src="{{imgSrc}}" /> <script>
angular.module('myApp', [])
.run(function($rootScope, $timeout) { $timeout(function() {
$rootScope.imgSrc = 'https://www.google.com/images/srpr/logo11w.png';
}, ); });
</script> </body>
</html>
这个src执行会报错,不行你试试
布尔属性,我觉得原型就是数据的双向绑定呢
angular学习的一些小笔记(中)之基础ng指令的更多相关文章
- angular学习的一些小笔记(中)之ng-disabled轻松实现按钮是否可点击状态
哇,这个可以轻松实现输入值就按钮可点击,输入框没有值则不可点击的状态呀 看代码 <!doctype html> <html ng-app=""> <h ...
- angular学习的一些小笔记(中)之双向数据绑定
<!doctype html> <html ng-app=""> <head> <script src="https://aja ...
- angular学习的一些小笔记(中)之ng-init
ng-init是给angular执行给定的表达式,初始化变量的值 <!DOCTYPE html> <html> <head> <meta charset='U ...
- angular学习的一些小笔记(中)之directive
directive里面的几个配置,上代码就清晰了 <!DOCTYPE html> <html ng-app='app'> <head> <meta chars ...
- angular学习的一些小笔记(中)之表单验证
表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlen ...
- angularjs中常用的ng指令介绍【转载】
原文:http://www.cnblogs.com/lvdabao/p/3379659.html 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下四种: 指令(directive).ng提 ...
- iOS 阶段学习第11天笔记(OC基础知识)
iOS学习(OC语言)知识点整理 一.OC基础知识 1)#import 用于导入头文件,预处理阶段加载引用,只加载一次. 2)OC 依赖于Foundation框架下的头文件Foundation.h, ...
- angular学习笔记(二十八-附2)-$http,$resource中的promise对象
下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...
- angular 学习笔记
每天进步一点点,学习笔记 笔记来自 angular权威指南 如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加 novalidate 标记. 而按钮标签则完全忽略 hr e f 属性,并不 ...
随机推荐
- static、const和static const
http://blog.csdn.net/rainkin1993/article/details/8068558 #include<iostream> using namespace st ...
- DOM对象模型四大基本接口
本文向大家描述一下DOM对象模型的四个基本接口,在DOM对象模型接口规范中,有四个基本的接口:Document,Node,NodeList以及NamedNodeMap. 在DOM对象模型接口规范中,有 ...
- Shell最多可以输入多少个参数?
在脚本编写过程中,通常会涉及到参数的输入.譬如,sh 1.sh 10 20,在执行1.sh这个脚本中,10即为第一个参数,20即为第二个参数.有时,就会有这个疑惑,即shell脚本最多可以支持多少个变 ...
- 有关PHP、HTML单引号、双引号转义以及转成HTML实体的那些事!
一.单引号和双引号转义在PHP的数据存储过程中用得比较多,即往数据库里面存储数据时候需要注意转义单.双引号: 先说几个PHP函数: 1.addslashes — 使用反斜线引用(转义)字符串: 返回字 ...
- 可变参数宏__VA_ARGS__
在 GNU C 中,宏可以接受可变数目的参数,就象函数一样,例如:#define pr_debug(fmt,arg...) \printk(KERN_DEBUG fmt,##arg) 用可变参数宏(v ...
- SQL Server利用RowNumber()内置函数与Over关键字实现通用分页存储过程(支持单表或多表结查集分页)
SQL Server利用RowNumber()内置函数与Over关键字实现通用分页存储过程,支持单表或多表结查集分页,存储过程如下: /******************/ --Author:梦在旅 ...
- SQLite中文排序
定义一个类: using System.Data.SQLite; namespace DAL { /// <summary> /// SQLite中文排序 /// </summary ...
- RAID一个硬盘FAIL。
周六本想清静学习一下,刚把咖啡冲好还没有来得及坐下,机房却传来让人心揪的报警声,原来一台服务器一个硬盘FAIL(挂了...... 抽换好的一个容量大小的SCSI硬盘,再次进入这个介面,选择Force ...
- 【iOS】Object-C注释
与其他语言一样,Object-C的注释也分为两种,一种是普通注释,一种是文档注释,普通注释通常给阅读代码的人看,而文档注释可以被appledoc识别,在使用的时候xcode能给出智能提示 简单注释 1 ...
- [DBW]js获取当前时间(昨天、今天、明天)
开发过程中某些前台页面的时间控件我们需要给默认当前时间,jquery可以轻松的帮我们实现,代码如下 1 //昨天的时间 2 var day1 = new Date(); 3 day1.setTime( ...