我们可以为单个元素使用多个 ng 样式的对象吗？

Posted 2023-03-06

【中文标题】我们可以为单个元素使用多个 ng 样式的对象吗？

【英文标题】：Can we use more than one objects in ng-style for a single element?

【发布时间】：2016-04-09 02:12:21

【问题描述】：

在控制器中，我们有两个 ng 样式的对象。

$scope.rightpadding = 
    paddingRight : '11px'




 $scope.toppadding = 
    paddingTop : '7px'

我们想在 ng 风格中使用这两个，像这样

不工作。

不可能是这样的

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

【参考方案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;

【讨论】：

我们可以使用 angular.extend 吗？ docs.angularjs.org/api/ng/function/angular.extend

@ShrishShrivastava 是的，我用过同样的……你看过我的编辑吗？

是的，现在我已经看到了。我也在找它。谢谢。它是满足我们要求的完美方式。

@ShrishShrivastava 接受答案..如果确实有帮助..谢谢:)

【参考方案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])">