Angularjs Angular 1 ng类无法按预期工作

我有一个简单的ng类，它根据条件切换两个类。当类被切换时，类的顺序会混乱，不知道为什么。有人能解决这个问题吗

<div class="ui" ng-class="{'two column grid' : submitNow, 'one column grid' : defaultState}"></div>

submitNow为true时呈现的HTML。这是意料之中的事

<!-- submitNow is true -->
<div class="ui ng-scope two column grid"></div>

defaultState为true时呈现的HTML。这会打乱ng类添加的类的顺序

<!-- defaultState is true -->
<div class="ui ng-scope column grid one"></div>

***编辑****

非常奇怪，因为它在JSFIDLE上工作。但这是我呈现的html代码的屏幕截图

这是一个演示

---

好的……看看elements inspector中的样式规则，语义ui使用诸如.ui[class*=two column].grid>.row>.column之类的选择器

不知道他们为什么这样做，这是不寻常的，并使订单的重要性

也不确定是angular还是浏览器对这些类的顺序进行排序。我怀疑是浏览器，但这只是猜测

您可以添加以下规则来修复非特定类顺序的布局，而不是试图找出导致排序的原因

.ui.two.column.grid > .row > .column, 
.ui.two.column.grid > .column:not(.row){
  width:50%!important;
}

更新： 我没有注意到使用这种方法的语义UI框架。 如果您仍然需要相同的方法，您可以检查我创建的自定义指令是否可以替代原始的NgClass指令

app.directive("myNgClass", function() {
  return {
    link: function(scope, element, attrs) {
      scope.$watch(
        function() {
          return attrs.isExpand;
        },
        function(isExpand) {
          element.removeAttr("class");
          if (JSON.parse(isExpand)) {              
            element.addClass("two column grid");
          } else {
            element.addClass("one column grid");
          }
        }
      );
    }
  };
});

原始答案 因此，深入研究Angularjs源代码中的NgClass指令实现并检查它们如何更新类，有一个函数称为。 在这个函数中，它查找应该删除和添加哪些类

NgClass保留重叠的类，并检查应该添加/删除哪些类，而不是在布尔标志反转时替换所有类

因此，在您的示例中，一个柱网轴线（默认情况下）和两个柱网轴线具有相同的柱网轴线类，因此它将保留它们，但从开头删除一个，在结尾添加两个。因此，结果将是柱网轴线1

---

我真的不建议使用类的顺序作为CSS选择器。这将使选择元素变得更加困难，使事情变得更加复杂

我还对您正在使用的CSS选择器发表了评论。我真的建议你们阅读这篇文章，这样你们就可以更好地练习使用较短的选择器，以及为什么保持CSS选择器较短对很多事情都有帮助

---

例如，如果不分别需要one、column和grid类，则可以使用.one column grid作为类名/CSS选择器，而不是.one.column.grid。

是否可以创建一个plunkr？另外，你能告诉我为什么两个类都有空格吗？我试过并测试过。正如你所期望的那样。检查JSFIDLE：类的顺序不应该有任何区别。你为什么认为这很重要？@charlietfl呈现的html让我这么认为。请看我编辑过的帖子什么让我这么想？所有这些都不是定义一个特定的问题。元素上类的顺序对于css规则的工作来说并不重要。此解决方案并不能解决根本问题。正如您在这里看到的，带有增强UI的扩展版演示提供了不完整的结果。我想唯一能解决这个问题的是特定的类顺序尝试了一些类似class=ui{{getClass}}的东西，但仍然遇到排序问题。可能会用自定义指令templateYeah我甚至试过js变量$scope.switchClass='one'+'列'+'网格'；尽管使用了+运算符，它仍然会打乱类的顺序。我真的不建议使用！重要的是，如果有其他选择。您可以检查：@yazantahhan该文章所指的是非常通用的用例。。。这更为具体，只是试图设置与框架中相同的属性。问题在于框架选择器使用特定顺序的方式，这一点很奇怪，您没有意识到这些类是由语义ui css框架预定义的。OP只是跟随他们的想法convention@charlietfl你说得对，很抱歉搞混了。将编辑postNo need to do angulr.element元素。。。元素已经是一个jqLite对象