具有条件表达式的Angular ng-style?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (1684)

我这样处理我的问题:

ng-style="{ width: getTheValue() }"

但为了避免在控制器端具有此功能,我更愿意做这样的事情:

ng-style="{ width: myObject.value == 'ok' ? '100%' : '0%' }"

我怎样才能做到这一点?

提问于
用户回答回答于

@jfredsilva显然对这个问题有最简单的答案

ng-style =“{'width':( myObject.value =='ok')?'100%':'0%'}”

但是,您可能真的想考虑我对更复杂的事情的回答。

类似三元的例子:

<p ng-style="{width: {true:'100%',false:'0%'}[myObject.value == 'ok']}"></p>

更复杂的东西:

<p ng-style="{
   color:       {blueish: 'blue', greenish: 'green'}[ color ], 
  'font-size':  {0: '12px', 1: '18px', 2: '26px'}[ zoom ]
}">Test</p>

如果$scope.color == 'blueish',颜色将为“蓝色”。

如果$scope.zoom == 2,font-size将是26px。

angular.module('app',[]);
function MyCtrl($scope) {
  $scope.color = 'blueish';
  $scope.zoom = 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl" ng-style="{
   color:       {blueish: 'blue', greenish: 'green'}[ color ], 
  'font-size':  {0: '12px', 1: '18px', 2: '26px'}[ zoom ]
}">
  color = {{color}}<br>
  zoom = {{zoom}}
</div>
用户回答回答于

如果你想使用表达式,那么严格的方法是:

<span class="ng-style: yourCondition && {color:'red'};">Sample Text</span>

但最好的方法是使用ng-class

扫码关注云+社区

领取腾讯云代金券