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. 获取图片base64编码的几种方法

    前文中我们聊了 Data URI 和 base64编码,稍微回顾下.base64编码 是将数据用 64 个可打印的字符进行编码的方式,任何数据底层实现都是二进制,所以都可以进行 base64编码,ba ...

  2. 特殊约束From To

    说实话这个不太懂,没用过也没有遇到相应的情况(或者说我不知道).大家可以更多的去参考特定约束FROM TO和MicroZed开发板笔记,第72部分:多周期约束等内容. 本文待修正 系列目录      ...

  3. <实训|第八天>超级管理员管理linux用户行为权限附监控主机状态

    作为运维工程师,系统管理员,你最大的权力就是给别人分配权力,而且你还能时时控制着他们,今天就给大家介绍一下关于管理用户这一方面的前前后后.  开班第八天: 主要课程大纲:(下面我将把自己的身份定位成一 ...

  4. JavaScript精要

    写在开篇之前 这个系列都文章算是我最近研究了JavaScript(以后简称js)大半个月的一点心得吧.记得以前看过罗小平的一本书叫<Delphi精要>,我也就姑且起名叫<JavaSc ...

  5. Linux epoll 笔记(高并发事件处理机制）

    wiki: Epoll优点: Epoll工作流程: Epoll实现机制: epollevent; Epoll源码分析: Epoll接口: epoll_create; epoll_ctl; epoll_ ...

  6. [转]Windows 8.1删除这台电脑中视频/文档/下载等六个文件夹的方法

    Windows 8.1 已将“计算机”正式更名为“这台电脑”,当我们双击打开“这台电脑”后,也会很明显得发现另外一些变化:Windows 8.1  默认将视频.图片.文档.下载.音乐.桌面等常用文件夹 ...

  7. WinForm 问题集锦

    [1]重用项目窗体解决方案: 1. 把FmMain.cs 和 FmMain.Designer.cs 和 FmMain .resx 三个文件复制到程序目录下: 2. 在vs里面添加现有项, 选择FmMa ...

  8. Spring3+Mybatis3+Mysql+ivy+liquibase

    Spring3+Mybatis3+Mysql+ivy+liquibase 集成 近一周时间所学技术:整合Spring+MyBatis+MySql+ivy+liquibase Mybatis:是一个基于 ...

  9. 牛逼的OSQL----大数据导入

    详情见链接: http://www.cnblogs.com/dunitian/p/5276449.html

  10. AJAX——核心XMLHttpRequest对象

    AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一个新的知识框架.而,XMLHttpR ...