AngularJs 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" 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值。
轉載于:https://www.cnblogs.com/sxz2008/p/6514471.html
總結
以上是生活随笔為你收集整理的AngularJs ngReadonly、ngSelected、ngDisabled的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css【清除浮动】常用方法*******
- 下一篇： 【JZOJ3636】【BOI2012】M