angularjs进修笔记—指令input

2024年3月26日 185次阅读 来源: 小俞

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');
            }
        });
    原文作者：小俞
    原文地址: https://segmentfault.com/a/1190000002632671
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞