How does the html file of webstorm not collapse the style? (style is an ellipsis)
ctrl + lift + '+' plus sign
angularjs study notes - instruction input
input[text]
input is generally used in combination with ngModel to achieve two-way binding, and angular provides many instructions for form validation
•required required
•ngRequired Required (ngRequired can control whether it is a required check)
•ngMinlength minimum length
•ngMaxlength maximum length
•pattern regular matching
•ngPattern regular matching
•ngChange triggers when the content changes
•ngTrim whether to trim data, default true
#html
<div ng -controller="LearnCtrl">
<input type="text"
ng-model="username"
required
ng-required="true"
ng-minlength="6"
ng-maxlength="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');
}
});
When the input has a validation attribute, if the input value If the verification conditions are not met, the model will be updated to undefined. If you want to update the model normally, you can set it through ngModelOptions.
Version: v1.3.9-local
input[checkbox]
When ngTrueValue and ngFalseValue are not set, the default values are true and false.
#html
<input type="checkbox" ng-model="check"/>
<p>{{check}}</p>
With these two values set, you can specify the selected and unselected model values. Checkbox also has the ng-chage directive.
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');
}
}); • ngValue value when selected (expression) • value value when selected radio button
input[radio]
• ngchange model update trigger
There is no required attribute, there is no way to do required verification, so it is best to select one by default when initializing.
#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 = '
}
});
input[date]
H5's new date picker.
•required required
•ngRequired required
•min minimum date
•max maximum date
•ngChange model update trigger
If you initialize the value for date, the model must be of type Date, otherwise an error will be reported.
#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', [])
.
$scope.date = new Date('2015-12-12');
$scope.change = function () {
alert('change');
}
});
input[datetime-local] datetime
selector The
usage is basically the same input[date] is more time selection than date.
input[month]
month selector, only year and month can be selected.
•required required
•ngRequired required
•min minimum month
•max maximum month
•ngChange model update trigger
If you initialize the value of month, the model must be of type Date, otherwise an error will be reported.
#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]
time Select
•required required
•ngRequired required
•min minimum time
•max maximum time
•ngChange triggered when model is updated
If you initialize the value of time, the model must be of type Date, otherwise an error will be reported.
#html
<div ng-controller="LearnCtrl">
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');
}
}); •ngChange model update trigger •max maximum number of weeks •min minimum number of weeks •ngRequired required •required required week selection
input[week]
如果给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'); numeric type input[number] });
}
•required required
•ngRequired required
•min minimum value
•max maximum value
•ngMinlength minimum length
•ngMaxlength maximum length
•pattern regular matching
•ngPattern regular matching
•ngChange model update trigger
Even if the validation attribute is not used, as long as the data is not of type Number, model will be updated to 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}$/"
<p>{{number}}</p>
</div>
#script
angular.module('learnModule', [])
.controller('LearnCtrl', function ($scope) {
$scope.number = 35;
$ scope.change = function () {
alert('change');
}
});
input[email]
mailbox type
•required required
•ngRequired required
•ngMinlength minimum length
•ngMaxlength maximum length
•pattern regular matching
•ngPattern regular matching
• ngChange model update trigger
Even if the validation attribute is not used, as long as the data does not conform to the mailbox format, the model will be updated to undefined.
#html
<div ng-controller="LearnCtrl">
<input type="email"
required
ng-required
ng-minlength="10"
ng-maxlength="20"
pattern="[email protected]"
ng-pattern="/^[email protected]$/"
ng-change="change()"/>
<p>{{email}}</p>
</div>
#script
angular.module('learnModule', [])
.controller('LearnCtrl', function ($scope) {
$scope.email = '';
$scope.change = function () {
alert('change');
}
}); •ngMinlength minimum length •ngRequired required •required required url type
input[url]
•ngMaxlength maximum length
•pattern regular matching
•ngPattern regular matching
•ngChange model update trigger
Even if the validation attribute is not used, as long as the data does not conform to the url format, the model will be updated to 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',
$scope.url = '';
$scope.change = function () {
//alert('change');
}
});
How does the html file of webstorm not collapse the style?
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=326567845&siteId=291194637
Ranking