angularjs—指令input

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');
}
});
上一篇:POJ3723最小生成树


下一篇:yii2整合百度编辑器umeditor