一、布尔属性指令：

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指令的更多相关文章

  1. angular学习的一些小笔记(中)之ng-disabled轻松实现按钮是否可点击状态

    哇,这个可以轻松实现输入值就按钮可点击,输入框没有值则不可点击的状态呀 看代码 <!doctype html> <html ng-app=""> <h ...

  2. angular学习的一些小笔记(中)之双向数据绑定

    <!doctype html> <html ng-app=""> <head> <script src="https://aja ...

  3. angular学习的一些小笔记(中)之ng-init

    ng-init是给angular执行给定的表达式,初始化变量的值 <!DOCTYPE html> <html> <head> <meta charset='U ...

  4. angular学习的一些小笔记(中)之directive

    directive里面的几个配置,上代码就清晰了 <!DOCTYPE html> <html ng-app='app'> <head> <meta chars ...

  5. angular学习的一些小笔记(中)之表单验证

    表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlen ...

  6. angularjs中常用的ng指令介绍【转载】

    原文:http://www.cnblogs.com/lvdabao/p/3379659.html 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下四种: 指令(directive).ng提 ...

  7. iOS 阶段学习第11天笔记（OC基础知识）

    iOS学习(OC语言)知识点整理 一.OC基础知识 1)#import  用于导入头文件,预处理阶段加载引用,只加载一次. 2)OC 依赖于Foundation框架下的头文件Foundation.h, ...

  8. angular学习笔记(二十八-附2)-$http,$resource中的promise对象

    下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...

  9. angular 学习笔记

    每天进步一点点,学习笔记 笔记来自  angular权威指南 如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加 novalidate 标记. 而按钮标签则完全忽略 hr e f 属性,并不 ...

随机推荐

  1. SpringAOP之静态代理

    一.SpringAOP: ⒈AOP:Aspect Oriented Programming 面向切面编程, 实现的是核心业务和非核心业务之间的的分离,让核心类只做核心业务,代理类只做非核心业务.  ⒉ ...

  2. 深入理解PHP内核(五)变量及数据类型-变量的结构和类型

    原文链接:http://www.orlion.ga/238/ 编程语言的类型可以分为强类型和弱类型两种,PHP是弱类型语言,但是C语言是强类型语言.在官网PHP实现内部,所有变量使用同一种数据结构(z ...

  3. Netbeans 中创建数据连接池和数据源步骤（及解决无法ping通问题）

    1.启动glassfish服务器, 在浏览器的地址栏中输入 http://localhost:4848 2.首先建立JDBC Connection Pools: 3.new 一个Connectio P ...

  4. 你用过这种奇葩的C#注释吗？如何看待

    本人虽然不是专业开发人员,也非专业出身,但一直使用C#堆码,解决自己日常的小问题.包括自己的研究,也是用C#来实现和测试.对C#是情有独钟.虽然C#的很多高级技术不会用,也不太懂,但总归是知道,耳闻目 ...

  5. VS2013正则表达式应用示例

    VS2013正则表达式语法 在查找替换对话框中查看 VS2013语法可在查找替换对话框中查看,具体过程如下: 通过编辑->查找和替换->在文件中替换或者相应快捷键(Ctrl+Shift+H ...

  6. HTML5 Dashboard – 那些让你激动的 Web 技术

    HTML5 Dashboard 是一个 Mozilla 推出的项目,里面展示了最前沿的 HTML5,CSS3,JavaScript 技术.每一项技术都有简洁,在线演示以及详细的文档链接.这些技术将成为 ...

  7. 吐槽坑爹的微软win store app审核

    从学习win store app 开发到做出第一个应用 博客园cnblogs 花了一个多月的全部业余和上班空闲时间, 上周在端午节放假期间终于完成了计划的全部开发和测试, 6月10号怀着无比激动的心情 ...

  8. VS2008 C++ 调用MATLAB 2009b 生成的DLL .

    转载: 刚开始学习用VC++调用matlab生成的DLL,找了网上一些资料,难以找到vs2008与MATLAB2009b版本的,按照以往版本做的总是有很多错误.经过两天努力,终于调试成功,这里将经验总 ...

  9. 如何解读SQL Server日志(2/3)

    接下来说说返回的RowLogo Content列,例子中返回了三个列.这些列包含了数据操作的"有效工作负载(Playload)"记录.根据不同操作类型有效负载的内容也是不同的,但是 ...

  10. Redis使用总结(2):Python接口

    安装redis-py sudo pip2 install redis 牛刀小试 redis连接实例是线程安全的,可以直接将redis连接实例设置为一个全局变量直接使用.如果需要另一个Redis实例(o ...