angularjs学习笔记—指令input

头像
TTFB
    阅读 7 分钟
    3

    input[text]

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

    • required 必填
    • ngRequired 必填（ngRequired可以控制是否是必填校验）
    • ngMinlength 最小长度
    • ngMaxlength 最大长度
    • pattern 正则匹配
    • ngPattern 正则匹配
    • ngChange 内容改变时触发

    • ngTrim 是否trim数据，默认true

      #html
<div ng-controller="LearnCtrl">
    <input type="text"
           ng-model="username"
           required
           ng-required="true"
           ng-minlength="6"
           ng-maxlength="15"
           pattern="[0-9]{6,15}"
           ng-pattern="/^[0-9]{6,15}$/"
           ng-change="change()"
           ng-trim="false"
            />
</div>

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

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

});

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

    版本：v1.3.9-local

    input[checkbox]

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

    #html
<input type="checkbox" ng-model="check"/>
<p>{{check}}</p>

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

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

    #html
<div ng-controller="LearnCtrl">
    <input type="checkbox"
           ng-model="check"
           ng-true-value="'YES'"
           ng-false-value="'N'+'O'"
           ng-change="change()"/>

    <p>{{check}}</p>        
</div>

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

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

    input[radio]

    单选按钮

    • value 选择中时的值
    • ngValue 选择中时的值（表达式）
    • ngchange model更新触发

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

    #html
<div ng-controller="LearnCtrl">
    <input type="radio"
           ng-model="radio"
           ng-change="change()"
           value="value1"/>
    <input type="radio"
           ng-model="radio"
           ng-change="change()"
           ng-value="'value2'"/>

    <p>{{radio}}</p>
</div>

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

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

    input[date]

    H5新增的日期选择器。

    • required 必填
    • ngRequired 必填
    • min 最小日期
    • max 最大日期
    • ngChange model更新触发

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

    #html
<div ng-controller="LearnCtrl">
    <input type="date"
           ng-model="date"
           min="2015-12-12"
           max="2015-12-22"
           rquired
           ng-required
           ng-change="change()"/>

    <p>{{date}}</p>
</div>

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

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

    input[datetime-local]

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

    input[month]

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

    • required 必填
    • ngRequired 必填
    • min 最小月份
    • max 最大月份
    • ngChange model更新触发

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

    #html
<div ng-controller="LearnCtrl">
    <input type="month"
           ng-model="month"
           required
           ng-required
           min="2015-01"
           max="2015-12"
           ng-change="change()"/>

    <p>{{month}}</p>
</div>

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

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

    input[time]

    时间选择

    • required 必填
    • ngRequired 必填
    • min 最小时间
    • max 最大时间
    • ngChange model更新时触发

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

    #html
<div ng-controller="LearnCtrl">
    <input type="time"
           required
           ng-required
           min="10:00:00"
           max="23:00:00"
           ng-model="time"
           ng-change="change()"/>

    <p>{{time}}</p>
</div>

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

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

    input[week]

    周选择

    • required 必填
    • ngRequired 必填
    • min 最小周数
    • max 最大周数
    • ngChange model更新触发

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

    #html
<div ng-controller="LearnCtrl">
    <input type="week"
           ng-model="week"
           required
           ng-required
           min="2015-W12"
           max="2015-W20"
           ng-change="change()"/>

    <p>{{week}}</p>
</div>

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

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

    input[number]

    数字类型

    • required 必填
    • ngRequired 必填
    • min 最小值
    • max 最大值
    • ngMinlength 最小长度
    • ngMaxlength 最大长度
    • pattern 正则匹配
    • ngPattern 正则匹配
    • ngChange model更新触发

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

    #html
<div ng-controller="LearnCtrl">
    <input type="number"
           ng-model="number"
           required
           ng-required
           min="10"
           max="100"
           ng-minlength=2
           ng-maxlength="3"
           pattern="3[0-9]{1}"
           ng-pattern="/^3[0-9]{1}$/"
           ng-change="change()"/>

    <p>{{number}}</p>
</div>

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

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

    input[email]

    邮箱类型

    • required 必填
    • ngRequired 必填
    • ngMinlength 最小长度
    • ngMaxlength 最大长度
    • pattern 正则匹配
    • ngPattern 正则匹配
    • ngChange model更新触发

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

    #html
<div ng-controller="LearnCtrl">
    <input type="email"
           ng-model="email"
           required
           ng-required
           ng-minlength="10"
           ng-maxlength="20"
           pattern="1@123.com"
           ng-pattern="/^1@123.com$/"
           ng-change="change()"/>

    <p>{{email}}</p>
</div>

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

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

    input[url]

    url类型

    • required 必填
    • ngRequired 必填
    • ngMinlength 最小长度
    • ngMaxlength 最大长度
    • pattern 正则匹配
    • ngPattern 正则匹配
    • ngChange model更新触发

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

    #html
<div ng-controller="LearnCtrl">
    <input type="url"
           ng-model="url"
           required
           ng-required
           ng-minlength="6"
           ng-maxlength="15"
           pattern="http://www.test.com"
           ng-pattern="/^http://www.test.com$/"
           ng-change="change()"/>

    <p>{{url}}</p>
</div>

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

        .controller('LearnCtrl', function ($scope) {
            $scope.url = '';
            $scope.change = function () {
                //alert('change');
            }
        });
    angularjsjavascript
    TTFB
    8.4k 声望396 粉丝

    技术问题不要看表象。

    « 上一篇
    angularjs学习笔记—指令a，ngHref
    下一篇 »
    angularjs学习笔记—事件指令

    引用和评论

    推荐阅读
    头像
    Change Detection And Batch Update

    TTFB赞 4阅读 4.2k评论 4

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.6k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1.3k评论 3

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    0 条评论
    得票最新