angularjs学习笔记—指令input

阳光穿透心脏的1/2处 2022-09-25 03:26 231阅读 0赞

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