我们可以在 ng-style 中为单个元素使用多个对象吗？

Question

在控制器中我们有两个 ng 风格的对象。

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



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

我们想在 ng-style 中同时使用这两个，像这样

不工作。

不可能像

$scope.style = { paddingRight : '11px', paddingTop : '7px' } 我们怎样才能做到这一点？

Answer 1

您可以创建一个方法，该方法将通过组合多个方法的结果来创建一个对象，并将其设置为 ng-style 对象。

另外 paddingRight 应该是 padding-right & paddingTop 应该是 padding-top

HTML

ng-style="setStyle()"

代码

$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;
}

Answer 2

使用 angular.extend 很好，也很有效。但如果我们不想使用它，那么这里有另一种方式

在范围内创建一个通用方法

$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,rightpadding])">

我们可以在 ng-style 中为单个元素使用多个对象吗？

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

html

javascript

css

angularjs

ng-style