angularJS中input相关指令详解

input相关指令

ng-disabled（按钮、输入框禁用的状态）

-服务$interval

代码示例：

<script>
var m=angular.module('myApp',[]);
m.controller('Aaa',['$scope','$interval',function($scope,$interval){

var iNow = 5;
$scope.text = iNow+"秒";
$scope.isDisabled = true;

// setInterval->$scope.$apply()
// $timeout $interval

var timer = $interval(function(){//采用服务的方法
iNow--;
$scope.text = iNow+"秒";
if(iNow==0){
//不能使用clearInterval(timer);清除服务
$interval.cancel(timer);//清除服务器
$scope.isDisabled = false;
}
},1000);

}]);
</script>

<div ng-controller="Aaa">
<input type="button" value="{{text}}" ng-disabled="isDisabled">
</div>

页面结果展示：
5秒时不能进行点击：

0秒时可以进行点击：

ng-readonly（禁用相关操作与disabled类似，但是readonly只能针对文本输入框、textarea并且可提交禁用的数据）

代码示例：

<input type="text" value="{{text}}" ng-readonly="isDisabled">

页面结果展示：

在5-1秒时光标可移入但是不可输入数据，在0秒时可输入并输入数据



ng-checked（单选框、复选框中选中状态的操作）

代码示例：

<input type="checkbox" value="{{text}}" ng-checked="isDisabled">

页面结果展示：

不是0秒时isDisabled值为true显示勾选



0秒时isDisabled值为false显示未勾选



ng-value（与value相类似但是用户体验更好：value需要在JS代码缓冲后才能进行相关数据的展示否则只能显示{{**}}，但是ng-value的值在JS未能缓冲时则不显示）

代码示例：

<input type="button" ng-value="text" ng-checked="isDisabled">