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