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. JavaScript的一些知识碎片(2)-反射-全局变量-回调

    JavaScript中的反射:编程语言中的反射原理都一样,就是通过操作metadata(描述语言的语言)来完成一些不具备反射功能的语言很难实现的功能.在静态语言中,反射是一个高大上的东西,比如在运行时 ...

  2. PRML读书会第六章 Kernel Methods（核函数，线性回归的Dual Representations，高斯过程 ，Gaussian Processes）

    主讲人 网络上的尼采 (新浪微博:@Nietzsche_复杂网络机器学习) 网络上的尼采(813394698) 9:16:05 今天的主要内容:Kernel的基本知识,高斯过程.边思考边打字,有点慢, ...

  3. 【跟着子迟品underscore】从用 `void 0` 代替 `undefined` 说起

    Why underscore 最近开始看 underscore源码,并将 underscore源码解读 放在了我的 2016计划 中. 阅读一些著名框架类库的源码,就好像和一个个大师对话,你会学到很多 ...

  4. 搭建emacs的go编程语言环境

    关于emacs就不说明了,直接切入主题.关于我的emacs配置,可以直接参考GitHub上的lienhua34/myemacs-conf. go-mode 安装 关于go-mode的安装,可以直接参考 ...

  5. （六）观察者模式详解（包含观察者模式JDK的漏洞以及事件驱动模型）

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 本章我们讨论一个除前面的单例 ...

  6. HTML5之创新的视频拼图剖析式学习之二

    昨天我们剖析了一下翻阅体验的实现.今天要剖析另外一个很有意思的效果——视频拼图. 网站中第一部分第二页<月熊的标志>是月熊志中互动性较强的一页,页面上会随机分布9块视频碎片,用户可以通过鼠 ...

  7. 在eclipse下如何安装下载好的插件

    我们下载到的插件,如果是一个jar格式的包,那么我们所需要做的事,就是 第一,新建一个名为plugins的文件夹, 第二,新建一个名为eclipse的文件夹,再将plugins复制进eclipse中, ...

  8. [Ajax系列]Ajax介绍

    Ajax简介: Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. What ? AJAX=异步JavaScript和XML AJAX是一种用于创建快读动态网页的技术 通过在后台语 ...

  9. c#模拟表单POST数据，并获取跳转之后的页面

    直接看代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...

  10. git rebase 和 reset的区别

    check the command detail by input 'git command --help' rebase: reset: