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>

Answer 1

You should change your ng-style to this

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

Answer 2

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>

Answer 3

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>

Answer 4

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 }}

Answer 5

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

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

Answer 6

assume message.viewed expression return true/false so use

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