使用ng型在多类Div Angularjs上编辑一个类的属性

Question

这是angularjs 1.5（不是2）

我有一个<div>标签，该标签具有默认类和仅在变量值上应用的类。我正在使用NG级切换提到的后类。

基于相同的变量值，我想切换默认类中的属性之一。我正在使用NG风格尝试切换此操作。

我怎么知道，还是可以设置NG风格的类型？还是有其他/更好的方法可以做到这一点？我想将逻辑内联合在HTML中，而不是求助于控制器中的编辑类。

我的html：

<div class="default-class" 
     ng-style="{flex-direction: Controller.isMobile() ? 'column-reverse' : 'row'}"
     ng-class="{'sometimes-class': !Controller.isMobile()}">
    ...
</div>

CSS：

.default-class{
    display: flex;
    flex-direction: row; /*A default value that I expect to toggle*/
} 
.sometimes-class{
    ...
}

我正在尝试编辑default-class中的flex-direction值。

Answer 1

只需从默认类删除 flex-direction 。

.default-class{
    display: flex;
} 

Answer 2

我相信您不能在NG风格上使用该操作员，但不要在此上引用我，无论如何，您可以使用它：

ng-style="Controller.isMobile() && {'flex-direction':'column-reverse'} || {'flex-direction': 'row'}"

应该解决这个问题，我用简单的布尔和文字颜色制作了JS小提琴来说明：

http://jsfiddle.net/itsca/adukg/16270/

您也可以检查以下问题：具有条件表达式的角ng风格

希望它有帮助。

Answer 3

根据此堆栈溢出问题，我的语法对于Angular 1.1.5 是正确的。

虽然我仍然不确定在同一范围内有其他类时是否可以使用NG-Show切换CSS属性，但我能够解决我在CSS中使用媒体查询的问题。

在我的问题中，当设置在移动分辨率（Controller.isMobile()）中运行时，我专门想切换。因此，我只是直接应用了属性。

（sass中的示例）

.default-class{
    display: inline-flex;
    flex-direction: row;
    @include respond-to(mobile) {
        flex-direction: column-reverse;
    }
}

特别是在我的情况下，Controller.isMobile()实际上是一种简化，其中所讨论的代码通过注入的工厂通过控制器，其作业是确定屏幕分辨率。在这种情况下，我无法访问该工厂。可能是这种注入会阻止ng-show适当切换吗？（尽管没有ng-show，但在整个HTML中都使用了此注射方法。）

我的具体问题已经通过CSS中的媒体查询解决了，但是在单个div上使用ng-show与多个类使用的总体问题仍然存在。