NG-STYLE is not working in angularjs

Question

message.viewed is a boolean value.I need to change attribute of my message content according to the boolean value.Here I used one method.I did not work for me.

<div  ng-style="message.viewed ? {'font-weight': 'bold''} : {'font-weight': 100}" >
<span >{{message.Title}}</span> {{message.details }}
</div>

Any error in the console? And there are two single quotes after bold, I guess it's a typo in the question? — sp00m
– sp00m, Commented Mar 27, 2017 at 9:18

Weedoze · Accepted Answer · 2017-03-27 09:16:36Z

3

You should change your ng-style to this

<div  ng-style="{'font-weight' : message.viewed ? 'bold' : '100'}" >
    <span >{{message.Title}}</span> {{message.details }}
</div>

answered Mar 27, 2017 at 9:16

Weedoze

14k2 gold badges38 silver badges65 bronze badges

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

3 Comments

Rajitha Perera Over a year ago

Thank you problem was fixed.

Weedoze Over a year ago

@HRCJ No problem. Don't forget to mark the answer that helped you

Rajitha Perera Over a year ago

I tried to mark.But I have to wait 10 mins.I'm waiting.

Sachila Ranawaka · Accepted Answer · 2017-03-27 09:16:16Z

1

change the ternary condition inside ng-style like this

 <div  ng-style="{'font-weight': message.viewed ? 'bold' : '100'}" >
<span >{{message.Title}}</span> {{message.details }}
</div>

Demo

angular.module("app",[])
.controller("ctrl",function($scope){

$scope.message = {"viewed":true,"Title":"sample"}
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div  ng-style="{'font-weight': message.viewed ? 'bold' : '100'}" >
<span >{{message.Title}}</span> {{message.details }}
</div>
</div>

answered Mar 27, 2017 at 9:16

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

2 Comments

Rajitha Perera Over a year ago

Thank you problem was fixed.

Sachila Ranawaka Over a year ago

@HRCJ no prob bro :D

nashcheez · Accepted Answer · 2017-03-27 09:19:48Z

1

Or you can use [style.fontWeight] instead of ng-style if its a matter of a single property.

<div  [style.fontWeight]="message.viewed ? 'bold' : '100'" >
    <span >{{message.Title}}</span> {{message.details }}
</div>

answered Mar 27, 2017 at 9:19

nashcheez

5,1931 gold badge30 silver badges54 bronze badges

2 Comments

sp00m Over a year ago

Is this AngularJS v1 valid?

Rajitha Perera Over a year ago

Thank you problem was fixed.

Mansi Parekh · Accepted Answer · 2017-03-27 09:20:25Z

1

It would work fine if there is no two single quotes after bold

<div ng-style="message.viewed ? {'font-weight': 'bold'} : {'font-weight': 100}">
<span>{{message.Title}}</span> {{message.details }}

answered Mar 27, 2017 at 9:20

Mansi Parekh

5192 silver badges13 bronze badges

3 Comments

Rajitha Perera Over a year ago

Thank you problem was fixed.

xkeshav Over a year ago

unnecessary use of same property font-weight twice

Mansi Parekh Over a year ago

Yes I know. I was just pointing out syntax error. We can set new style in else part also.

Sumit · Accepted Answer · 2017-03-27 09:22:40Z

1

Best way to assign a $scope variable to ng-style

$scope.style = message.viewed ? '{'font-weight': 'bold'}' : '{'font-weight': '100'}'

answered Mar 27, 2017 at 9:22

Sumit

1291 silver badge9 bronze badges

Comments

xkeshav · Accepted Answer · 2017-03-27 09:24:51Z

0

assume message.viewed expression return true/false so use

 ng-style="{font-weight:{ true:'bold', false: 100} [ message.viewed ] }"

edited Mar 27, 2017 at 9:24

answered Mar 27, 2017 at 9:20

xkeshav

54.2k47 gold badges183 silver badges256 bronze badges

4 Comments

sp00m Over a year ago

Is this AngularJS v1 valid?

xkeshav Over a year ago

Yes. absolutely

sp00m Over a year ago

Interesting, first time I see this notation. Thanks for sharing ;)

xkeshav Over a year ago

this is helpful when we can apply multiple conditions and classes based on different condition likewise [ {true:'whetever', flase:'whatelse'}[expression1],{true:'applyifTrue'}[expression2] ]

Collectives™ on Stack Overflow

NG-STYLE is not working in angularjs

6 Answers 6

3 Comments

2 Comments

2 Comments

3 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

2 Comments

2 Comments

3 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related