如何使用angularjs動態設置CSS樣式？

Question

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

我想通過angularjs動態設置像素數。 最終寬度也應乘以基本像素寬度乘以。 我怎樣才能做到這一點？

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

這當然行不通，但是顯示了我要實現的目標。 我希望不必引入控制器功能就可以做到這一點。

Answer 1

嘗試這個：

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

Answer 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
  }
}]);

Answer 3

這應該工作

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