NG-STYLE在angularjs中不起作用

Question

message.viewed是一个布尔值。我需要根据布尔值更改消息内容的属性。在这里，我使用了一种方法。

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

Answer 1

您应该将ng-style更改为此

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

Answer 2

像这样改变ng-style内的三元条件

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

演示版

 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

或者，如果仅涉及单个属性，则可以使用[style.fontWeight]而不是ng-style 。

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

Answer 4

如果加粗后没有两个单引号，那会很好用

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

Answer 5

将$ scope变量分配给ng-style的最佳方法

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

Answer 6

假设message.viewed表达式返回true / false，所以使用

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