How to add inline css in angular in different view with same content but different style?

Question

Here my html-

     <p  ng-if= "editMode=='edit'" style="margin-left: 1px;margin-top: -2px;">===some messages---</p>
     <p  ng-if= "editMode=='addNew'" style="margin-left: 1px;margin-top: -2px;">===some messages---</p>

In above example i have two diffrent view "edit" and "addNew" with same content but style is different. How to do that?

i just tried using ng-if .. But code won;t look good.. any other suggestion? — JOGO, Dec 22 '15 at 09:28
Use `ng-style`. Based on the expression evaluation the style is determined. — Amarnath, Dec 22 '15 at 09:29

score 0 · Answer 1 · edited May 23 '17 at 12:15

0

You can use ng-class:

<p ng-class='{"class1": editMode=="edit", "class2": editMode=="addNew"}'>===some messages---</p>

And in css file:

.class1 {
     /* some styles */
}
.class2 {
     /* some styles */
}

However there are many more built in directives in AngularJS that you can use. For a more detailed explanation about the options available and with examples, take a look at the accepted answer for a similar question

edited May 23 '17 at 12:15

Community

1
1

answered Dec 22 '15 at 09:30

pgrodrigues

2,083
1
24
28

But if i want to add it in inline itself? is there anyway? – JOGO Dec 22 '15 at 09:32
@saurav You can use `ng-style` for inline style. – Amarnath Dec 22 '15 at 09:45

How to add inline css in angular in different view with same content but different style?

1 Answers1