Выражение привязки строки ngClass с картой классов

Можно ли использовать ngClass с выражением И картой классов? Я хочу условно добавить класс на основе существования переменной, а также использовать эту переменную в выражении, создающем класс.

Например, если isActive() имеет значение true, а getStatus() возвращает "valid", я хочу, чтобы список классов был "элемент element--active element--valid". Если getStatus() возвращает значение undefined, я хочу, чтобы список классов был «элементным элементом — активным».

<div
  class="element"
  ng-class="{
   'element--active': ctrl.isActive(),
   'element--{{ ctrl.getStatus() }}': ctrl.getStatus() 
  }"></div>

Кажется, это не работает.

<div 
  class="element element--{{ctrl.getStatus()}}"
  ng-class="{
   'element--active': ctrl.isActive()
  }"></div>

Работает, но если getStatus() возвращает значение undefined, возникает лишний зависший "элемент--".

Должен ли я добавить метод в свой контроллер для обработки генерации класса?


angularjs ng-class
person Paul    schedule 09.06.2015    source источник
comment
Похоже, что это выиграло бы от директивы, которая принимала статус и добавляла все необходимые классы. Вы можете сделать все построение строк и скрыть все это от шаблона и контроллера.   -  person BenCr    schedule 09.06.2015

Ответы (2)


arrow_upward
2
arrow_downward

я бы предложил сделать только один вызов функции, чтобы получить классы. Это сделает его чище, и логика класса будет собрана в одном месте.

В вашем контроллере:

this.getElementStatus = function(){
   var rules = {active:this.isActive()}; //Prefix with element-- {element--active:}
   rules[this.getStatus()] = true; //Prefix with element--, rules['element--' + this.getStatus()] = true
   return rules;
}

и ваш взгляд будет просто:

<div 
  class="element"
  ng-class="ctrl.getElementStatus()"></div>

Кажется, что ваш element-- избыточен с правилом, вместо этого используйте свойство cascadeability (CSS). и определить правила как:

Пример:

.element.active{ /*....*/ }
.element.success {/*...*/}
.element.error{/*...*/}

Это поможет в обслуживании, станет более подробным и позволит естественным образом добавлять правила css и может удалить такие сложности из представления.

Вы также можете сделать:

<div class="element" 
     ng-class="{'active': ctrl.isActive(), '{{ctrl.getStatus()}}':true}"

or :

<div class="element" 
     ng-class="[ctrl.isActive() ? 'active' : '', ctrl.getStatus()]"

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

 <div class="element" 
     ng-class="[!ctrl.isActive() || 'element--active' , 'element--' + ctrl.getStatus()]">
person PSL    schedule 09.06.2015
comment
Я использую БЭМ (csswizardry.com/2013 /01/) для моего CSS, поэтому он может показаться излишним. - person Paul; 09.06.2015
comment
@ShyGuy ах, хорошо, это генератор .. Ненавижу, как он генерирует .. :) также смотрите мои обновления с синтаксисом массива. Разве вы не можете просто объединить их в одну функцию на контроллере и вызвать ее? - person PSL; 09.06.2015

arrow_upward
0
arrow_downward

Вы можете использовать класс и карту ng-класса для одного и того же элемента. Но поскольку имя вашего класса является динамическим, вам придется что-то вроде этого.

<div
  ng-class="'element '
            + (ctrl.isActive() ? ' element--active' : '') 
            + (ctrl.getStatus() ? ' element--' + ctrl.getStatus() : '')"></div>
person ShankarSangoli    schedule 09.06.2015