ngReadonly

该指令将input，textarea等文本输入设置为只读。

HTML规范不允许浏览器保存类似readonly的布尔值属性。如果我们将一个Angular的插入值表达式转换为这样的属性，那么当浏览器删除该属性时，绑定信息就会丢失。这个指令不被浏览器删除，并且提供了一个永久性的可靠的地方来存储绑定信息。

格式：ng-readonly=“value”

value：表达式   结果为boolean类型

使用代码：

  <input type="checkbox" ng-model="checked"><br />

  <input type="text" ng-readonly="checked" value="Hello World" />

这个指令用的比较多的地方如编辑资料，但是某些字段是只读的，不让编辑的，这时候就可以设置ngReadonly=“true”了，并且还是可通过js直接操作，只需要操作的表达式返回值是true/false即可。然后在项目中用到大多在datetimepicker插件上设置这个指令，只能通过日历选择日期，而不能直接输入来选择。

ngSelected

该指令为select设置了指定的选中值。

HTML规范不允许浏览器保存类似selected的布尔值属性。如果我们将一个Angular的插入值表达式转换为这样的属性，那么当浏览器删除该属性时，绑定信息就会丢失。这个指令不被浏览器删除，并且提供了一个永久性的可靠的地方来存储绑定信息。

格式:ng-selected=“value”

value：表达式   结果是boolean类型。

使用代码：

  <input ng-model="checked" type="checkbox" />

  <select>

     <option>Hello</option>

     <option ng-selected="checked">World</option>

  </select>

select还有绑定方法，代码如下：

  <div ng-app="Demo" ng-controller="testCtrl as ctrl">

       <select ng-model="ctrl.getId" ng-options="i.id as i.value for i in ctrl.list">

       </select>

  </div>
  (function () {

    angular.module("Demo", [])

    .controller("testCtrl", testCtrl);

    function testCtrl() {

        this.list = [{ id: 1, value: "获取1的id" }, { id: 2, value: "获取2的id" }, { id: 3, value: "获取3的id" }];

        this.getId = 2;

    };

  }());

上面的代码运行后自动绑定选中值是第二个选项，是因为ngModel的值是第二项的id。ngMolde绑定的即是select的选中值。

默认选中还有:

<body ng-app="app" ng-controller="ctrl">

<select name="" ng-model="v">

    <option value="0">0</option>

    <option value="1">1</option>

</select>

<script>

    angular.module('app',[]).controller('ctrl',['$scope',function($scope){

        $scope.v = '1';

    }])

</script>

</body>

ngDisabled

该指令在chrome，firefox的button启用起效，在ie8及以下版本ie浏览器无效。

HTML规范不允许浏览器保存类似selected的布尔值属性。如果我们将一个Angular的插入值表达式转换为这样的属性，那么当浏览器删除该属性时，绑定信息就会丢失。这个指令不被浏览器删除，并且提供了一个永久性的可靠的地方来存储绑定信息。

格式：ng-disabled=”value”

value: boolean类型  判断所在标签是否可用。

使用代码：

  <input type="checkbox" ng-model="checked">控制下面按钮是否可用<br/>

  <button ng-disabled="checked">我是按钮</button>

相信这三个大家都看的懂，需要注意的也就select后一种写法去绑定select值。

AngularJs ngReadonly、ngSelected、ngDisabled的更多相关文章

  1. Angular - - ngReadonly、ngSelected、ngDisabled

    ngReadonly 该指令将input,textarea等文本输入设置为只读. HTML规范不允许浏览器保存类似readonly的布尔值属性.如果我们将一个Angular的插入值表达式转换为这样的属 ...

  2. 前端MVC学习总结（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  3. 前端MVC学习笔记（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  4. AngularJs:Service、Factory、Provider依赖注入使用与区别

           本教程使用AngularJS版本:1.5.3        AngularJs GitHub: https://github.com/angular/angular.js/       ...

  5. AngularJS 简介、指令、表达式

    AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...

  6. angularjs中$http、$location、$watch及双向数据绑定学习实现简单登陆验证

    使用$http.$location.$watch及双向数据绑定等实现简单的用户登陆验证,记录备忘: 1.$http模拟从后台获取json格式的数据: 2.$watch实时监控数据变化: 3.$loca ...

  7. AngularJS：何时应该使用Directive、Controller、Service？【新手必看】

    (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉.(译者注:老外真谦虚,我大天 ...

  8. AngularJs学习笔记2-控制器、数据绑定、作用域

    上次分享完该系列文章后有朋友也建议说1.x版本除了维护也没有必要学习,可以学习2.0开始学习,我也知道1.x无论是从性能还是架构上都没有2.x好,但是我想因为现在也有一些朋友还在用1.x版本,因为1. ...

  9. AngularJS：何时应该使用Directive、Controller、Service？

    AngularJS:何时应该使用Directive.Controller.Service? (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC ...

随机推荐

  1. Jump Game 的三种思路 - leetcode 55. Jump Game

    Jump Game 是一道有意思的题目.题意很简单,给你一个数组,数组的每个元素表示你能前进的最大步数,最开始时你在第一个元素所在的位置,之后你可以前进,问能不能到达最后一个元素位置. 比如: A = ...

  2. 编程中的offsetof

    linux和windows平台都已经定义了offsetof函数,用于取struct类型中某个变量的偏移量 在stddef.h头文件中,该宏的完整说明如下: #ifdef __cplusplus #if ...

  3. 4.5你太黑了，不带这么玩TypeForwardedTo的

    话说最近好不容易把framework 4.0的metadata信息都能全部抽出了,结果换4.5挂了...framework那帮人在4.5里面用了些什么诡异的玩意? 结果一看4.5的部分field用了t ...

  4. js队列

    用指针和数组模拟基本队列 http://blog.csdn.net/zhuwq585/article/details/53177192 js下的事件队列,或者异步队列 http://www.jb51. ...

  5. 学习Google Protocol buffer之语法

    上一篇结尾的时候问了几个问题,其实主要就是这个protoBuffer协议的语法,弄清楚语法后边才好开展工作嘛,不然大眼而对小眼儿,互相不认识,就没法玩耍了.其实就是学习怎么用google提供的这套 p ...

  6. 后缀树（BZOJ3238TLE）

    #include<cstdio> #include<cstring> #define LL long long ],stt[]; LL ans; ,sidcnt,lastcre ...

  7. 论文笔记Outline

    1.Information publication: author: 2.What 3.Dataset 4.How input: output: method: 5.Evaluation: basel ...

  8. SEO站点优化学习总结

    1.网站收录查询 在搜索引擎里面输入Site:域名 即可. 尾巴——学习SEO可以看看以下几个网站: 卢松松博客[一个草根的博客]:http://lusongsong.com/ 站长之家[里面有站长统 ...

  9. Apache Tomcat相应插件版本

    参考页面: http://tomcat.apache.org/whichversion.html

  10. 【BZOJ 1911】【APIO 2010】特别行动队

    http://www.lydsy.com/JudgeOnline/problem.php?id=1911 夏令营里斜率优化的例题,我调了一晚上,真是弱啊. 先推公式吧($sum_i$表示$x_1 \d ...