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. iptables实现负载均衡

    例子: iptables -t nat -A PREROUTING -d 10.192.0.65/32 -p tcp -m tcp --dport 8080 -m statistic --mode n ...

  2. ASP.NT运行原理和页面生命周期详解及其应用

    ASP.NT运行原理和页面生命周期详解及其应用 1. 下面是我画的一张关于asp.net运行原理和页面生命周期的一张详解图.如果你对具体不太了解,请参照博客园其他帖子.在这里我主要讲解它的实际应用.  ...

  3. AngularJS中实现无限级联动菜单

    多级联动菜单是常见的前端组件,比如省份-城市联动.高校-学院-专业联动等等.场景虽然常见,但仔细分析起来要实现一个通用的无限分级联动菜单却不一定像想象的那么简单.比如,我们需要考虑子菜单的加载是同步的 ...

  4. [HDU5902]GCD is Funny(xjb搞）

    题意:n个数每次选三个数删除,取其中两个数将gcd放回去两次,问最后剩的数可能是多少 分析:考虑最优情况: 先拿出三个数,留下两个x,x  再来一个y,(x,x,y)我们可以删去一个x,留下两个gcd ...

  5. 网页样式——各种炫酷效果持续更新ing...

    1.evanyou效果-彩带的实现,效果如下 注:这个主要用的是Canvas画布实现的,点击背景绘制新的图形,代码如下: /*Html代码:*/ <canvas id=">< ...

  6. ssh配置文件ssh_config和sshd_config区别

    问题描述:在一次配置ssh端口和秘钥登录过程中,修改几次都没有成功.最后发现修改的是ssh.config,原因是习惯tab一下,实在是眼拙! ssh_config和sshd_config配置文件区别: ...

  7. 如何删除GIT中的.DS_Store

    .DS_Store 是什么 使用 Mac 的用户可能会注意到,系统经常会自动在每个目录生成一个隐藏的 .DS_Store 文件..DS_Store(英文全称 Desktop Services Stor ...

  8. 转：PHP中防止SQL注入的方法

    [一.在服务器端配置] 安全,PHP代码编写是一方面,PHP的配置更是非常关键. 我们php手手工安装的,php的默认配置文件在 /usr/local/apache2/conf/php.ini,我们最 ...

  9. 【摘抄】将xml注释文档生成网页

    config.SetDocumentationProvider(new XmlDocumentationProvider(HttpContext.Current.Server.MapPath(&quo ...

  10. jq实现登陆页面的拖拽功能

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...