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

时间:2016-01-05 09:46:45

标签: javascript html css angularjs ng-style

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

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



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

我们想在ng风格中使用这些,有些像这样

不工作。

它可能不像

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

2 个答案:

答案 0 :(得分:2)

您可以创建一个方法,通过组合多种方法的结果来创建对象。将其设置为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;
}

答案 1 :(得分:1)

使用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])">