©
本文档使用
php.cn手册 发布
ngMessages
is a directive that is designed to show and hide messages based on the state of a key/value object that it listens on. The directive itself compliments error message reporting with the ngModel
$error object (which stores a key/value state of validation errors).
ngMessages
manages the state of internal messages within its container element. The internal messages use the ngMessage
directive and will be inserted/removed from the page depending on if they're present within the key/value object. 默认情况下, only one message will be displayed at a time and this depends on the prioritization of the messages within the template. (This can be changed by using the ng-messages-multiple on the directive container.)
A remote template can also be used to promote message reuseability and messages can also be overridden.
点击这里 to learn more about ngMessages
and ngMessage
.
<!-- using attribute directives --><ANY ng-messages="expression">
<ANY ng-message="keyValue1">...</ANY>
<ANY ng-message="keyValue2">...</ANY>
<ANY ng-message="keyValue3">...</ANY></ANY>
<!-- or by using element directives --><ng-messages for="expression">
<ng-message when="keyValue1">...</ng-message>
<ng-message when="keyValue2">...</ng-message>
<ng-message when="keyValue3">...</ng-message></ng-messages>
参数 | 类型 | 详述 |
---|---|---|
ngMessages | string | an Angular表达式 evaluating to a key/value object (this is typically the $error object on an ngModel instance). |
ngMessagesMultiple | multiple
(可选)
|
string | when set, all messages will be displayed with true |
ngMessagesInclude | include
(可选)
|
string | when set, the specified template will be included into the ng-messages container |
<form name="myForm">
<label>Enter your name:</label>
<input Type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required />
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div></form>
angular.module('ngMessagesExample', ['ngMessages']);