How to set css style dynamically with angularjs?

Question

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

I want to set the pixel number dynamically by angularjs. The final width should also be calculated times a base pixel width. How could I achieve this?

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

This does of course not work, but shows what I'm trying to achieve. I'd like this do be done without having to introduce a controller function.

score 5 · Answer 1 · answered Oct 02 '15 at 07:46

5

Try this:

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

answered Oct 02 '15 at 07:46

Michael

3,085
1
17
15

If you need a couple of css rules simultaneously use commas: `
`
– Elena V Sep 23 '17 at 18:21

score 2 · Accepted Answer · answered Oct 02 '15 at 10:18

This works fine.

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>

Controller:

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

score 0 · Answer 3 · answered Oct 02 '15 at 07:42

0

this should work

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

answered Oct 02 '15 at 07:42

Burawi

451
4
16

Please consider editing your post to add more explanation about what your code does and why it will solve the problem. An answer that mostly just contains code (even if it's working) usually wont help the OP to understand their problem. It's also recommended that you don't post an answer if it's just a guess. A good answer will have a plausible reason for why it could solve the OP's issue. – SuperBiasedMan Oct 02 '15 at 11:23

How to set css style dynamically with angularjs?

3 Answers3