How can I use multiple objects in ng-style for a single element in AngularJS

Question

I have two ng-style objects in my controller.

$scope.leftpadding = {
    paddingLeft : '7px'
}

$scope.toppadding = {
    paddingTop : '7px'
}

I want to use both these objects in ng-style like

<h5 ng-style="toppadding leftpadding">

Is not working. as neither of the objects are being applied in style.

It can't be like

$scope.style = {
  paddingLeft : '7px',
  paddingTop : '7px'
}

Is there any way to achieve this?

Anik Islam Abhi · Accepted Answer · 2015-12-22 06:01:56Z

3

Create a common method in scope

$scope.margeStyleObj = function(objectList) {
    var obj = {};
    objectList.forEach(function(x) {
      for (var i in x)
        obj[i] = x[i];
    });
    return obj;
  }

Then call from html

<h5 ng-style="margeStyleObj([toppadding,leftpadding])">

JSFIDDLE

You can also use angular.extend

Like this

  $scope.margeStyleObj = function(objectList) {
    var obj = {};
    objectList.forEach(function(x) {
        angular.extend(obj,x);
    });
    return obj;
  }

JSFIDDLE

edited Dec 22, 2015 at 6:01

answered Dec 22, 2015 at 5:47

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tarun Dugar · Accepted Answer · 2015-12-22 06:05:08Z

2

I am not sure you can use ngStyle in that way. Try this:

ng-style="{'padding-top': paddingTop, 'padding-bottom': paddingBottom}"

And have $scope.paddingTop to have whatever value you want for padding-top, padding-bottom.

edited Dec 22, 2015 at 6:05

answered Dec 22, 2015 at 5:41

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

9 Comments

Aditya Ponkshe Over a year ago

This will make my code huge. It is just an example I put in the question, it may potentially have 5-6 styles for an element.

Tarun Dugar Over a year ago

yeah i understand that, let me dig in a little.

Aditya Ponkshe Over a year ago

First object is applied, second is not

Tarun Dugar Over a year ago

do you have bottompadding defined in the controller, in your question it is left padding...

Tarun Dugar Over a year ago

@AdityaPonkshe, doesn't look like it. They have the array support for ngClass but not ngStyle.

|

Collectives™ on Stack Overflow

How can I use multiple objects in ng-style for a single element in AngularJS

2 Answers 2

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related