ng-disabled的使用

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>

 

 

运行一下：

posted @ 2017-03-10 11:57  小鱼海棠  阅读(901)  评论(0)  编辑  收藏  举报