Динамический CSS углового класса

Question

Динамический CSS углового класса

0

Существует следующий код:

HTML:

<tr ng-repeat="o in orders" ng-class="getOrderClass(o)">

CoffeeScript:

  $scope.getOrderClass = (o) ->
    switch o.orderStatus.title
      when 'New' then 'new-order'
      when 'Completed' then 'completed-order'

Этот код выглядит неплохо, но есть одна проблема: после загрузки страницы я вижу класс "нового порядка" или "завершенный порядок" в атрибуте "ng-class", а не в "классе". Где ошибка? заранее спасибо

malcoauri 29 июнь 2015, в 11:22

Источник

Теги:

javascript

angularjs

css

coffeescript

4 ответа

Ещё вопросы

Vall3y · Answer 1 · 2015-06-29T09-36-00.000Z

Вы можете написать такую директиву

app.directive('myClass', [function(){
  return {
    scope: {
      class: '=myClass'
    },
    restrict: 'A',
    link: function(scope, elem, attrs, controller) {
      elem.addClass(scope.class);
    }
  };
}]);

Ввиду:

<div my-class="getOrderClass(o)">I have the getOrderClass(o) class</div>

Я бы предложил вам каким-то образом кэшировать результат getOrderClass (o), потому что когда вы связываете вызов функции, он будет вызван в каждый круг дайджест. Это может привести к проблемам с производительностью в долгосрочной перспективе и обычно не является хорошей практикой, особенно если функция находится в ng-repeat.

Это может быть что-то вроде <div ng-repeat="o in orders" my-class="orderClasses[o.id]">I have the getOrderClass(o) class</div>

Изменение: обратите внимание, что эта директива только добавляет класс один раз, когда директива инициализируется, поэтому она не будет работать как обычная двусторонняя привязка. Если вам это нужно, вам также нужно добавить наблюдателя для scope.class и снова вызвать elem.addClass

SDekov · Answer 2 · 2015-06-29T07-53-00.000Z

Попробуй это:

$scope.getOrderClass = (o) ->
  title = o.orderStatus.title
  {
    'new-order': title == 'New'
    'completed-order': title == 'Completed'
  }

Dmitri Algazin · Answer 3 · 2015-06-29T07-31-00.000Z

0

вы можете использовать эту структуру

ng-class="{'new-order' : o.orderStatus.title == 'New', 'completed-order' : o.orderStatus.title == 'Completed'}"

Dmitri Algazin 29 июнь 2015, в 07:31

0

Это очень уродливый код. Я могу добавить больше состояний в будущем :) Извините, братан, спасибо за попытку
malcoauri 29 июнь 2015, в 08:36
0

нет проблем, все, что делает тебя счастливым!
Dmitri Algazin 29 июнь 2015, в 09:05

shreyas888 · Answer 4 · 2015-06-29T07-14-00.000Z

Вы использовали ng-класс в качестве атрибута в этом случае. Если вы проверяете или просматриваете исходный код, он будет указан как значение атрибута ng-class. Если вам нужно вычисленное значение класса в атрибуте "class", используйте этот синтаксис

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