Question

我希望将内联样式应用于基于我在控制器中定义的标志的DOM元素。这背后的原因是我不能改变视图中使用的现有CSS，也不能扩展它。

那就是说，这是我目前的观看代码：

  <label class="control-label" ng-class="{'margin-left:100px' : is_modal}">Hello</label>

is_modal只是一个标志，我需要在控制器中切换为true / false。

以上代码无效，我也尝试过：

  <label class="control-label" ng-class="{'style=margin-left:100px' : is_modal}">Hello</label>

但也不起作用。谁知道这是否可能？要定义内联样式？

另一种选择是ng-style，但我似乎无法将我的控制器标志is_modal绑定到ng-style，因为它不允许像ng-class那样询问条件...

由于亚历

Answer 1

如果您正在寻找内联解决方案，那么此特定解决方案可能适合您：

  <label class="control-label" ng-style="is_modal && {'margin-left': '100px'}">Hello</label>

但是如果你想拥有一个更加一致和可维护的解决方案，并附带一系列复杂的条件来附加你的样式，那么我建议你创建一个范围函数，放在ng-class或{{1}中指令。

e.g。

<强> HTML

ng-style

<强> JAVASCRIPT

<label class="control-label" ng-style="getStyle(is_modal)">Hello</label>

请参阅此EXAMPLE

Answer 2

您可以使用ng-style指令：

<label class="control-label" ng-style="is_modal && {margin-left:'100px'}">Hello</label>

Answer 3

请参阅此jsBin

创建一个评估isModal的函数并返回正确的样式，例如：

  $scope.isModel = true; // or whatever

  $scope.labelStyle = function() {
    if ($scope.isModel) {
      return {
        'margin-left': '100px'
      }
    }
  }

然后你的标记看起来像：

<label ng-style="labelStyle()">Hello</label>

如何在Angular中的ng-class中使用内联样式？

3 个答案: