javascript - 动态更改 CSS AngularJS

Question

我想一次性动态地更改 otc 中任何类的样式。由于 CSS 样式来自 Web Api。 javascript 有办法做到这一点吗？

感谢愿意帮助的人

这是我的 HTML:

 <accordion close-others="false">
   <div>
      <accordion-group class="div-recipe-header">
           <accordion-heading></accordion-heading>
              <my-directive></my-directive>
                 <div otc-dynamic>
                     <div class="div-recipe-name"></div>
                      <div class="div-recipe-cost"></div>
                </div>   

      </accordion-group>
    </div>
  </accordion>

来自 Json 的示例数据(我将数据放在变量 usercss 中)

usercss = '.div-recipe-cost{position: absolute;top: 0;left: calc(100% - 85px);bottom: 0;overflow:padding-top: 5px;padding-bottom: 5px;padding-right: 0;font-family: 'Segoe UI', 'Open Sans', 'Roboto', 'Lucida Grande', 'Helvetica', 'Arial', 'sans-serif';font-size: small;background: none;overflow: hidden;font-weight: bold;} .div-recipe-name{position: absolute;top: 0;left: 12px;bottom: 0;width: calc(100% - 0px);padding-top: 5px;padding-bottom: 5px;padding-right: 0;height: calc(100% - 0px);font-family: 'Segoe UI', 'Open Sans', 'Roboto', 'Lucida Grande', 'Helvetica', 'Arial', 'sans-serif';font-size: large;background: none;overflow: hidden;} '

Answer 1

使用ng-class .这将允许您动态设置类。此外，您可以将三元运算与 ng 类结合使用，如 here 所示。 .

我假设您在加载到内存中的样式表中定义了类。

    .white{
        color: #ffffff;
    }
    .black{
        color: #000000;
    }

在你的 Angular Controller 中，你可以定义一个变量来保存你的类名。在这里，我将其设置为默认应用“白色”。

$scope.myClass = "white";

然后在您的标记中，您只需使用 ng-class 将该变量绑定(bind)到您的元素。

<div ng-class="myClass">....</div>

现在，只要 $scope.myclass 发生变化，相应的类就会添加到 div 中，而旧的类将被删除。因此，在您的 Controller 中，您将拥有可以触发更改的内容...

if( some_condition ){
    $scope.myClass = "black";
} else {
    $scope.myClass = "white";
}