Как установить стиль CSS динамически с angularjs?

Question

Как установить стиль CSS динамически с angularjs?

0

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

Я хочу установить число пикселей динамически по угловым. Окончательная ширина также должна быть рассчитана раз в ширину базового пикселя. Как я мог это достичь?

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

Это, конечно, не работает, но показывает, чего я пытаюсь достичь. Я бы хотел, чтобы это было сделано без необходимости вводить функцию контроллера.

membersound 02 окт. 2015, в 09:59

Источник

Теги:

javascript

html

angularjs

css

3 ответа

5

Попробуй это:

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

Michael 02 окт. 2015, в 05:02

0

Если вам нужно несколько правил css, используйте запятые: <div ng-style="{width: (model.number * 30) +'px', height: (model.number * 40) +'px',}">
Elena V 23 сен. 2017, в 18:21

0

это должно работать

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

Burawi 02 окт. 2015, в 05:05

0

Пожалуйста, отредактируйте ваш пост, чтобы добавить больше объяснений о том, что делает ваш код и почему он решит проблему. Ответ, который в основном содержит только код (даже если он работает), обычно не помогает ОП понять их проблему. Также рекомендуется не публиковать ответ, если это всего лишь предположение. Хороший ответ будет иметь правдоподобную причину, по которой он может решить проблему ОП.
SuperBiasedMan 02 окт. 2015, в 11:23

Ещё вопросы

Если вам нужно несколько правил css, используйте запятые: <div ng-style="{width: (model.number * 30) +'px', height: (model.number * 40) +'px',}">
Пожалуйста, отредактируйте ваш пост, чтобы добавить больше объяснений о том, что делает ваш код и почему он решит проблему. Ответ, который в основном содержит только код (даже если он работает), обычно не помогает ОП понять их проблему. Также рекомендуется не публиковать ответ, если это всего лишь предположение. Хороший ответ будет иметь правдоподобную причину, по которой он может решить проблему ОП.

ZenDD · Accepted Answer · 2015-10-02T07-24-00.000Z

Это прекрасно работает.

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