Angular - - ngReadonly、ngSelected、ngDisabled

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"> <div ng-controller="testCtrl as ctrl"> <select ng-model="ctrl.getId" ng-options="i.id as i.value for i in ctrl.list"> </select> </div> </div>

  (function () { angular.module("Demo", []) .controller("testCtrl", testCtrl); function testCtrl() { var vm = this; vm.list = [{ id: 1, value: "获取1的id" }, { id: 2, value: "获取2的id" }, { id: 3, value: "获取3的id" }]; vm.getId = 2; }; }());

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

 

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值。