Can we use more than one objects in ng-style for a single element?

Question

In controller we have two ng-style objects.

$scope.rightpadding = {
    paddingRight : '11px'
}



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

We want to use both these in ng-style, some thing like this

Is not working.

It can't be like

$scope.style = { paddingRight : '11px', paddingTop : '7px' } How can we achieve this?

Answer 1

You can create one method which will create an object by combining the result from multiple methods & will set it to ng-style object.

Also paddingRight should be padding-right & paddingTop should be padding-top

HTML

ng-style="setStyle()"

Code

$scope.rightpadding = function() {
  return {
    'padding-right': '11px'
  };
}

$scope.toppadding = function() {
  return {
    'padding-top': '7px'
  };
}

$scope.setStyle = function() {
  var object = {};
  angular.extend(object, $scope.rightpadding())
  angular.extend(object, $scope.toppadding())
  return object;
}