Как использовать ngClass для установки первого класса на элемент? - PullRequest
Новая
       9

Как использовать ngClass для установки первого класса на элемент?

0 голосов
/ 03 октября 2018

Мне хорошо известно о многих способах использования 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 ]

0 голосов
/ 27 октября 2018

Правила CSS являются лучшим решением здесь.

Хотя это может быть не столь удовлетворительным, как поиск эзотерического способа получения ngClass для упорядочения классов, это лучшее решение здесь,

По сути, вы имитируете правила сетки каркаса.С помощью Semantic UI, который использует сетку из 16 ячеек, добавление этих новых правил CSS позволит вам использовать ngClass, как указано выше.

Добавьте это в таблицу стилей: 

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

И тогда ваш ngClass, которому нужны заказанные классы, будет работать.Вы можете написать элемент html, используя ngClass следующим образом: 

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

Это будет работать, основываясь на возвращаемом значении для isWide()

Для использования этого типа ngClass во всемваше приложение, если оно использует сетку семантического пользовательского интерфейса, добавьте эти классы в таблицу 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

Сравните с определением сетки семантики здесь .

0 голосов
/ 03 октября 2018

Я думаю, что ngClass просто добавляет класс модификатора css к элементу, поэтому он должен быть добавлен в последний список классов.

По моему мнению, вы можете попробовать это: 

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

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