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">