代码之家 › 专栏 › 技术社区 › Tony Brasunas

如何使用ngclass在元素上设置第一个类?

ng-class semantic-ui angularjs

0

Tony Brasunas · 技术社区 · 7 年前

我很清楚使用ngclass向元素添加类的许多方法。但是,由ngclass添加的类似乎总是附加在元素类的末尾。有没有一种简单的方法可以在元素上设置第一个类?

例如,在 Semantic 这些是不同的:

<div class="nine wide column>

和

<div class="wide column nine">

我想使用ngclass来设置第一个类,这样类似的东西就可以工作了:

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

2 回复 | 直到 7 年前

1

0

kntrieu 7 年前

我认为ngclass只是向元素添加了一个修饰符css类,所以它应该被添加到类列表的最后一个。

在我看来,你能试试这个吗?

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

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

2

0

Tony Brasunas 7 年前

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

虽然这可能不如找到一种深奥的方法 ngClass 为了订购这些类,这是这里最好的解决方案。

实际上,您模拟了框架的网格规则。对于使用16单元格网格的语义用户界面,添加这些新的CSS规则将使您能够使用 NG级 如上所述。

将此添加到样式表中:

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

然后你的 NG级 那就需要上课了。您可以使用 NG级 这样地:

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

这将有效,基于 isWide()

使用这种类型的 NG级 在整个应用程序中,如果它使用语义用户界面的网格,请将这些类添加到CSS工作表中:

  /* 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

与语义的网格定义比较 here .