如何使用angularjs动态设置css样式?

时间:2015-10-02 07:37:05

标签: javascript html css angularjs

<div style="width: 50px !important">

我想通过angularjs动态设置像素数。还应计算最终宽度乘以基本像素宽度。我怎么能做到这一点?

<div ng-style="{{width: (model.number * 30)px !important}}">

这当然不起作用,但显示了我想要实现的目标。我希望这样做,而无需引入控制器功能。

3 个答案:

答案 0 :(得分:5)

试试这个:

<div ng-style="{width: (model.number * 30) +'px'}">

答案 1 :(得分:2)

这很好用。

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
  <p> Number: <input type="number" ng-model="model.number" /> </p> 

  <p> Times:  <input type="number" ng-model="model.times" /></p>
  <p style="outline:1px solid black; width:{{model.number*model.times}}px;" >Resulding width: {{model.number*model.times}} px</p>
</div>

控制器:

angular.module("myApp", []).controller("myCtrl", ["$scope", function($scope){
  $scope.model = {
    number: 50,
    times: 2
  }
}]);

答案 2 :(得分:0)

这应该有效

<div ng-style="{'width': model.number * 30}">