如何使用 ngClass 在元素上设置 First class？

Question

我很清楚使用 ngClass 向元素添加 classes 的许多方法。但是 ngClass 添加的 classes 似乎总是附加在元素的 classes 的末尾。有没有一种直接的方法可以在元素上设置第一个 class？

例如，在像 Semantic 这样的框架中，它们是不同的：

<div class="nine wide column>

和

<div class="wide column nine">

我想用 ngClass 设置第一个 class，这样就可以了：

<div class="wide column" ng-class="vm.isWide() ? 'sixteen' : 'nine'">

Answer 1

我认为 ngClass 只是在元素中添加了一个修饰符 css class，所以它应该添加到 class 列表的最后。

按照我的想法，你可以试试这个吗：

<div class="{{setClass()}} wide column nine"></div>

<script>
     $scope.setClass = function () {
     var class1 = "wrapper" 
     return class1 ;
     }
</script>

Answer 2

CSS规则是这里最好的解决方案。

虽然它可能不如找到一种让 ngClass 订购类的深奥方法那么令人满意，但它是这里最好的解决方案。

本质上，您模仿了框架的网格规则。使用使用 16 单元网格的语义 UI，添加这些新的 CSS 规则将使您能够像上面那样使用 ngClass。

将此添加到您的风格中 sheet:

 /* Fix for Semantic / Angular class ordering */
  .wide.column.sixteen
    width 100% !important
  .wide.column.nine
    width 56% !important

然后您的 ngClass 需要订购的类才能工作。您可以使用 ngClass 编写 html 元素，如下所示：

<div class="wide column" ng-class="vm.isWide() ? 'sixteen' : 'nine'">

这将有效，基于 isWide()

的 return 值

要在整个应用程序中使用这种类型的 ngClass，如果它使用语义-ui 的网格，请将这些类添加到您的 CSS sheet:

  /* Fix for Semantic / Angular class ordering */
  .wide.column.sixteen
    width 100% !important
  .wide.column.fifteen
    width 94% !important
  .wide.column.fourteen
    width 88% !important
  .wide.column.thirteen
    width 82% !important
  .wide.column.twelve
    width 75% !important
  .wide.column.eleven
    width 69% !important
  .wide.column.ten
    width 63% !important
  .wide.column.nine
    width 56% !important
  .wide.column.eight
    width 50% !important
  .wide.column.seven
    width 44% !important
  .wide.column.six
    width 37% !important
  .wide.column.five
    width 31% !important
  .wide.column.four
    width 25% !important
  .wide.column.three
    width 18% !important
  .wide.column.two
    width 12% !important
  .wide.column.one
    width 6% !important

与Semantic的网格定义比较here。

如何使用 ngClass 在元素上设置 First class？

How to use ngClass to set the First class on an element?

angularjs

ng-class

semantic-ui