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
– JOGO, Commented Dec 22, 2015 at 9:28
Use ng-style. Based on the expression evaluation the style is determined. — Amarnath
– Amarnath, Commented Dec 22, 2015 at 9:29

Community · Accepted Answer · 2017-05-23 12:15:45Z

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, 2017 at 12:15

CommunityBot

11 silver badge

answered Dec 22, 2015 at 9:30

pgrodrigues

2,0781 gold badge25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JOGO Over a year ago

But if i want to add it in inline itself? is there anyway?

Amarnath Over a year ago

@saurav You can use ng-style for inline style.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related