©
This document uses PHP Chinese website manual Release
可以进行angular数据绑定的标准HTML文本输入框。
<input Type="text"
ng-model=""
[name=""]
[required=""]
[ng-required=""]
[ng-minlength=""]
[ng-maxlength=""]
[ng-pattern=""]
[ng-change=""]
[ng-trim=""]>| 参数 | 类型 | 详述 |
|---|---|---|
| ngModel | string | 声明用于数据绑定的Angular表达式。 |
| name (可选)
|
string | 发布到表单下的控件的属性名称。 |
| required
(可选)
|
string | 如果值没有输入，则设置 |
| ngRequired
(可选)
|
string | 当ngRequired表达式等于true时，添加 |
| ngMinlength
(可选)
|
number | 如果值短于minlength则设置 |
| ngMaxlength
(可选)
|
number | 如果值长于maxlength则设置 |
| ngPattern
(可选)
|
string | 如果值不匹配正则表达式则设置 |
| ngChange
(可选)
|
string | Angular表达式，当输入元素通过用户交互方式发生输入变化时会执行这个表达式。 |
| ngTrim
(可选)
|
boolean | 如果设置为false，Angular将不自动去除输入内容的空格。 |
<script>
angular.module('textInputExample', [])
.controller('ExampleController', ['$scope', Function($scope) {
$scope.text = 'guest';
$scope.word = /^\s*\w*\s*$/;
}]);
</script>
<form name="myForm" ng-controller="ExampleController">
Single word: <input Type="text" name="input" ng-model="text"
ng-pattern="word" required ng-trim="false">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.pattern">
Single word only!</span>
<tt>text = {{text}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>var text = element(by.binding('text'));var valid = element(by.binding('myForm.input.$valid'));var input = element(by.model('text'));
it('should initialize to model', Function() {
expect(text.getText()).toContain('guest');
expect(valid.getText()).toContain('true');});
it('should be invalid if empty', Function() {
input.clear();
input.sendKeys('');
expect(text.getText()).toEqual('text =');
expect(valid.getText()).toContain('false');});
it('should be invalid if multi word', Function() {
input.clear();
input.sendKeys('hello world');
expect(valid.getText()).toContain('false');});