Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 288225b

Browse files
qbzztgkalpak
authored andcommitted
docs(ngClass): add class 'has-error' to demonstrate hyphen use
Modify the example, to show that, when using `ngClass`'s map syntax, hyphenated classes (e.h. such as those used by Bootstrap) must be enclosed in quotes. Closes #12027
1 parent e967abc commit 288225b

File tree

1 file changed

+8
-4
lines changed

1 file changed

+8
-4
lines changed

src/ng/directive/ngClass.js

+8-4
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ function classDirective(name, selector) {
162162
* @example Example that demonstrates basic bindings via ngClass directive.
163163
<example>
164164
<file name="index.html">
165-
<p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
165+
<p ng-class="{strike: deleted, bold: important, 'has-error': error}">Map Syntax Example</p>
166166
<label>
167167
<input type="checkbox" ng-model="deleted">
168168
deleted (apply "strike" class)
@@ -173,7 +173,7 @@ function classDirective(name, selector) {
173173
</label><br>
174174
<label>
175175
<input type="checkbox" ng-model="error">
176-
error (apply "red" class)
176+
error (apply "has-error" class)
177177
</label>
178178
<hr>
179179
<p ng-class="style">Using String Syntax</p>
@@ -202,6 +202,10 @@ function classDirective(name, selector) {
202202
.red {
203203
color: red;
204204
}
205+
.has-error {
206+
color: red;
207+
background-color: yellow;
208+
}
205209
.orange {
206210
color: orange;
207211
}
@@ -212,13 +216,13 @@ function classDirective(name, selector) {
212216
it('should let you toggle the class', function() {
213217
214218
expect(ps.first().getAttribute('class')).not.toMatch(/bold/);
215-
expect(ps.first().getAttribute('class')).not.toMatch(/red/);
219+
expect(ps.first().getAttribute('class')).not.toMatch(/has-error/);
216220
217221
element(by.model('important')).click();
218222
expect(ps.first().getAttribute('class')).toMatch(/bold/);
219223
220224
element(by.model('error')).click();
221-
expect(ps.first().getAttribute('class')).toMatch(/red/);
225+
expect(ps.first().getAttribute('class')).toMatch(/has-error/);
222226
});
223227
224228
it('should let you toggle string example', function() {

0 commit comments

Comments
 (0)