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. shell 使用

    echo -e "1\t2\t3" #-e echo -e "\e[1;31m This is red text \e[0m" #color echo -e & ...

  2. Theano3.1-练习之初步介绍

    来自 http://deeplearning.net/tutorial/,虽然比较老了,不过觉得想系统的学习theano,所以需要从python--numpy--theano的顺序学习.这里的资料都很 ...

  3. 十分钟掌握Activity的生命周期与启动模式

    1. Activity的生命周期 正常情况下的Activity生命周期如下图所示(来自Android Developer): 当资源相关的系统配置变更时(比如设备屏幕方向改变,键盘可见性变化),会导致 ...

  4. jQuery学习笔记（四）：attr()与prop()的区别

    这一节针对attr()与prop()之间的区别进行学习. 先看看官方文档是如何解释两者之间功能差异的: attr() Get the value of an attribute for the fir ...

  5. 通向高可扩展性之路（推特篇） ---- 一个推特用来支撑1亿5千万活跃用户、30万QPS、22MB每秒Firehose、以及5秒内推送信息的架构

    原文链接:http://highscalability.com/blog/2013/7/8/the-architecture-twitter-uses-to-deal-with-150m-active ...

  6. TortoiseSVN安装使用（转）

    TortoiseSVN是windows平台下Subversion的免费开源客户端. 一般我们都是先讲讲服务器的配置,然后再讲客户端的使用,但是在TortoiseSVN上,却可以反过来.因为,如果你的要 ...

  7. nios II--实验3——led 100M软件部分

    软件开发 参照实验二(led),该实验与实验二(led)的不同之处在于系统的时钟由50M提成为100M.运行结果,在调试窗口输出Hello from Nios II!,并且板上的四个LED灯流动显示, ...

  8. 【前端积累】createElement createTextNode

    <!DOCTYPE html> <html><!--树根--> <head> <meta charset="utf-8"> ...

  9. 简单解决ListView和ScrollView冲突，复杂情况仅供参考

    ScrollView嵌套ListView冲突问题的最优解决方案 (转) 记录学习之用 项目做多了之后,会发现其实 ScrollView嵌套ListVew或者GridView等很常用,但是你也会发现各种 ...

  10. poj1182 带权并查集

    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 60225   Accepted: 17656 Description ...