Question

我有一个简单的ng-class，可以根据条件切换两个类。当切换班级时，班级的顺序混乱了，不知道为什么。有人对此有解决方案吗？

<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-class添加的类的顺序

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

***编辑****

非常奇怪，因为它可以在jsfiddle上运行。但是这是我渲染的html代码的屏幕截图

这是一个演示

https://codepen.io/vibwaj/pen/KKPBdNp

Answer 1

好的...在元素检查器中查看样式规则，语义ui使用.ui[class*="two column"].grid > .row > .column之类的选择器

不确定他们为什么这样做，这很不寻常，并且确实使订单很重要。

也不确定是角形还是排序这些类顺序的浏览器。我怀疑是浏览器，但这是一个猜测。

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

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

Working codepen

Answer 2

更新：

我没有注意到使用这种方法的语义UI框架。如果仍然需要相同的方法，则可以检查the forked Codepen，我创建了一个自定义指令来替代原始的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指令实现并检查它们如何更新类，有一个名为updateClasses的函数。在此函数中，它查找应删除和添加的类。

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

因此，在您的情况下，one column grid（默认情况下）和two column grid具有column grid类，因此将保留它们，但从中删除one开始并在末尾添加two。因此结果将是column grid one。

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

对于您使用的CSS选择器，我也有一条评论。我真的建议您阅读Keep your CSS selectors short文章，这样可以更好地使用较短的选择器，为什么将CSS选择器保持较短也可以在很多事情上有所帮助。

例如，如果您不需要单独的one，column和grid类，则可以只使用.one-column-grid作为类名/ CSS选择器的.one.column.grid。

Angular 1 ng-class无法正常工作

2 个答案:

更新：

原始答案