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

NG-STYLE不在angularjs中工作

6 个答案: