使用ng-style来编辑多类div上的一个类的属性 AngularJS
使用ng-style来编辑多类div上的一个类的属性 AngularJS
这是AngularJS 1.5（不是2）。
我有一个标签，其中有一个默认类和一个仅在变量值上应用的类。我使用ng-class来切换后者提到的类。
基于相同的变量值，我想切换默认类中的一个属性。我使用ng-style来尝试切换这个属性。
我如何知道，或者我可以设置，ng-style与哪个类交互？或者有没有一种不同/更好的方法来做这个？我想在HTML中保留内联逻辑，而不是在控制器中编辑类。
我的HTML：
...
CSS：
.default-class{ display: flex; flex-direction: row; /*我期望切换的默认值*/ } .sometimes-class{ ... }
我正在尝试编辑在
default-class中找到的flex-direction的值。
问题的出现原因:
问题的解决方法:
最终解决问题的方法是使用CSS中的媒体查询来切换属性。在这个例子中，作者想要在移动分辨率下切换属性，因此直接在CSS中应用了这个属性。作者使用了Sass来展示代码，在Sass中使用了媒体查询来响应移动分辨率，通过设置不同的flex-direction属性来实现切换。
在这个例子中，Controller.isMobile()实际上是一个简化版，实际上这段代码通过一个注入的工厂函数在控制器中传递，该工厂函数的作用是确定屏幕分辨率。在这种情况下，作者无法访问这个工厂函数。可能是因为这个注入的方法阻止了ng-show的适当切换吗？（尽管在HTML中使用这个注入的方法似乎是成功的，只是没有使用ng-show。）
作者通过在CSS中使用媒体查询解决了自己的问题，但是关于如何在一个拥有多个类的div上使用ng-show的问题仍然存在。
问题出现的原因是ng-style指令不能使用条件运算符。解决方法是使用三元运算符来替代条件运算符，代码如下：
ng-style="Controller.isMobile() && {'flex-direction':'column-reverse'} || {'flex-direction': 'row'}"
这样就可以实现对多个class的div元素的属性进行编辑。可以通过下面的jsfiddle链接来查看一个使用布尔值和文字颜色来说明的简单示例：
[jsfiddle示例链接](http://jsfiddle.net/Itsca/ADukg/16270/)
如果需要进一步了解，还可以参考这个问题：
[Angular ng-style with a conditional expression](https://stackoverflow.com/questions/19375695)
希望对你有所帮助。
问题出现的原因是在一个多类(div)的元素上使用ng-style修改一个类的属性。具体来说，问题出现在尝试从一个默认的类中移除flex-direction属性时，然后使用ng-style根据Controller.isMobile()的值来切换flex-direction属性。然而，这种方法并没有起作用，flex-direction属性仍然无法根据Controller.isMobile()的值进行切换。
解决方法如下：
只需从默认类中移除flex-direction属性即可。
.default-class {
display: flex;
/* Remove flex-direction property */
}