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