angularjs学习笔记—指令input

摘要：新增的日期选择器。类型必填必填最小长度最大长度正则匹配正则匹配更新触发即使没有使用校验属性，只要数据不符合格式，就会被更新成。

input一般和ngModel结合使用来实现双向绑定，同时angular提供了很多表单校验的指令

required 必填

ngRequired 必填（ngRequired可以控制是否是必填校验）

ngMinlength 最小长度

ngMaxlength 最大长度

pattern 正则匹配

ngPattern 正则匹配

ngChange 内容改变时触发

ngTrim 是否trim数据，默认true

#html

    


#script
angular.module("learnModule", [])

.controller("LearnCtrl", function ($scope) {
    $scope.change = function () {
        alert("change");
    }

});

当input有校验属性时，如果输入的值不符合校验条件，model会被更新成undefined。如果想正常更新model可以通过ngModelOptions设置。

版本：v1.3.9-local

当未设置ngTrueValue和ngFalseValue时，默认值是true和false。

#html

{{check}}

设置了这两个值了，就可以指定选中和未选中的model值。checkbox同样也有ng-chage指令。

  
ngTrueValue和ngFalseValue的参数是表达式哦。

#html

    

    
{{check}}
        


#script
angular.module("learnModule", [])

        .controller("LearnCtrl", function ($scope) {
            $scope.check = "YES";
            $scope.change = function () {
                alert("change");
            }
        });

单选按钮

value 选择中时的值

ngValue 选择中时的值（表达式）

ngchange model更新触发

  
没有required属性，没办法做必填校验，所以最好初始化的时候默认选中一个。

#html

    
    

    
{{radio}}


#script
angular.module("learnModule", [])

        .controller("LearnCtrl", function ($scope) {
            $scope.radio = "value2";
            $scope.change = function () {
                alert("change");
            }
        });

H5新增的日期选择器。

required 必填

ngRequired 必填

min 最小日期

max 最大日期

ngChange model更新触发

  
如果给date初始化值，model一定得是Date类型，否则会报错。

#html

    

    
{{date}}


#script
angular.module("learnModule", [])

        .controller("LearnCtrl", function ($scope) {
            $scope.date = new Date("2015-12-12");
            $scope.change = function () {
                alert("change");
            }
        });

日期时间选择器
用法基本同input[date]，就是比date多了个时间选择。

月份选择器，只能选择年和月。

required 必填

ngRequired 必填

min 最小月份

max 最大月份

ngChange model更新触发

  
如果给month初始化值，model一定得是Date类型，否则会报错。

#html

    

    
{{month}}


#script
angular.module("learnModule", [])

        .controller("LearnCtrl", function ($scope) {
            $scope.month = new Date("2015-05");
            $scope.change = function () {
                alert("change");
            }
        });

时间选择

required 必填

ngRequired 必填

min 最小时间

max 最大时间

ngChange model更新时触发

  
如果给time初始化值，model一定得是Date类型，否则会报错。

#html

    

    
{{time}}


#script
angular.module("learnModule", [])

        .controller("LearnCtrl", function ($scope) {
            $scope.time = new Date("2015-12-12 20:00:00");
            $scope.change = function () {
                alert("change");
            }
        });

周选择

required 必填

ngRequired 必填

min 最小周数

max 最大周数

ngChange model更新触发

  
如果给week初始化值，model一定得是Date类型，否则会报错。

#html

    

    
{{week}}


#script
angular.module("learnModule", [])

        .controller("LearnCtrl", function ($scope) {
            $scope.week = new Date("2015-01-12");
            $scope.change = function () {
                alert("change");
            }
        });

数字类型

required 必填

ngRequired 必填

min 最小值

max 最大值

ngMinlength 最小长度

ngMaxlength 最大长度

pattern 正则匹配

ngPattern 正则匹配

ngChange model更新触发

  
即使没有使用校验属性，只要数据不是Number类型，model就会被更新成undefined。

#html

    

    
{{number}}


#script
angular.module("learnModule", [])

        .controller("LearnCtrl", function ($scope) {
            $scope.number = 35;
            $scope.change = function () {
                alert("change");
            }
        });

邮箱类型

required 必填

ngRequired 必填

ngMinlength 最小长度

ngMaxlength 最大长度

pattern 正则匹配

ngPattern 正则匹配

ngChange model更新触发

  
即使没有使用校验属性，只要数据不符合邮箱格式，model就会被更新成undefined。

#html

    

    
{{email}}


#script
angular.module("learnModule", [])

        .controller("LearnCtrl", function ($scope) {
            $scope.email = "";
            $scope.change = function () {
                alert("change");
            }
        });

url类型

required 必填

ngRequired 必填

ngMinlength 最小长度

ngMaxlength 最大长度

pattern 正则匹配

ngPattern 正则匹配

ngChange model更新触发

  
即使没有使用校验属性，只要数据不符合url格式，model就会被更新成undefined。

#html

    

    
{{url}}


#script
angular.module("learnModule", [])

        .controller("LearnCtrl", function ($scope) {
            $scope.url = "";
            $scope.change = function () {
                //alert("change");
            }
        });