2

コントローラーには、2 つの ng スタイルのオブジェクトがあります。

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



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

これらの両方を ng-style で使用したい、このようなもの

動かない。

それは好きではありません

$scope.style = { paddingRight : '11px', paddingTop : '7px' } どうすればこれを達成できるでしょうか?

4

2 に答える 2

2

複数のメソッドの結果を組み合わせてオブジェクトを作成し、それをオブジェクトに設定する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;
}
于 2016-01-05T09:47:36.373 に答える
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])">
于 2016-01-05T10:07:36.507 に答える