如何在ng-style中为AngularJS中的单个元素使用多个对象

Question

我的控制器中有两个ng-style个对象。

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

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

我想在ng-style中使用这两个对象

<h5 ng-style="toppadding leftpadding"> 

不工作。因为这两个对象都没有在风格中应用。

它可能不像

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

有没有办法实现这个目标？

Answer 1

在范围

中创建一个通用方法

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

然后从html调用

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

的 JSFIDDLE

您还可以使用 angular.extend

喜欢这个

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

的 JSFIDDLE

Answer 2

我不确定您是否可以这样使用ngStyle。试试这个：

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

让$scope.paddingTop为padding-top，padding-bottom提供您想要的任何价值。