CODEWITHSUNDEEP
javascripthtmlcssangularjs
Rajitha Perera
Rajitha Perera

Reputation: 1621

NG-STYLE is not working in angularjs

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>

Upvotes: 0

Views: 4383

Answers (6)

xkeshav
xkeshav

Reputation: 54016

assume message.viewed expression return true/false so use

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

Upvotes: 0

Sumit
Sumit

Reputation: 129

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

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

Upvotes: 1

Mansi Parekh
Mansi Parekh

Reputation: 519

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

Upvotes: 1

nashcheez
nashcheez

Reputation: 5183

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>

Upvotes: 1

Weedoze
Weedoze

Reputation: 13943

You should change your ng-style to this

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

Upvotes: 3

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41387

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>

Upvotes: 1

Related Questions