1.适用范围
该指令适用于<input>, <select>,<button> 和 <textarea> 元素。
2.用法解析
ng-disabled 指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。
如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。</textarea></p>
1 <input ng-disabled="expression"></input>
注：
| expression | 如果表达式返回true，则设置为元素添加 disabled 属性。 |
3.案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""> 选中复选框禁用所有表单输入域:<input type="checkbox" ng-model="all"><br> <br> <input type="text" ng-disabled="all"> <input type="radio" ng-disabled="all"> <select ng-disabled="all"> <option>先生</option> <option>女士</option> </select> <button ng-disabled="all">按钮</button> </body> </html>
4.项目应用
需求：初始按钮正常可点状态，点击之后（发送请求之前）将按钮置灰色（禁用），以阻止多次无效的点击，请求完成之后按钮可用。
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ng-disabled</title> 6 <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet"> 7 <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 8 9 </head> 10 11 <body ng-app="myApp" ng-controller='AppCtrl'> 12 <button class="button button-positive" ng-click="skip()" ng-disabled="button_clicked">Click Me</button> 13 </body> 14 15 <script type="text/javascript"> 16 angular.module('myApp', []) 17 .controller('AppCtrl', function($http,$scope) { 18 $scope.button_clicked = false;//按钮初始状态可用 19 $scope.skip = function() { 20 alert("Clicked!"); 21 $scope.button_clicked = true;//点击之后按钮禁用 22 // return false; 23 } 24 //url是请求的接口，这里暂时写成伪代码 防止报错写成字符串形式 25 $http.get('url') 26 .success(function(response){ 27 alert('请求成功！'); 28 $scope.button_clicked = false;//按钮可用 29 30 }); 31 32 }) 33 </script> 34 </html>
运行一下：