Angularjs ng-class переключается между несколькими классами

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

<div class="component"
      ng-class="{'small': small, 'medium': medium, 'large': large, 'xlarge': xlarge}"
      ng-if="component.title == 'Heading'"
      ng-init="editing = false; small = false; medium = false; large = false; xlarge = false">

                  <input class="heading" ng-blur="editing = false" ng-hide="!editing" type="text" placeholder="Heading" ng-model="component.element" />
                  <h2 ng-click="editing = true" ng-hide="editing">{{component.element}}</h2>

                  <div ng-hide="!editing" class="textEditor">
                      <ul>
                          <li>
                              <a href="" ng-click="small = true">
                                  <span class="icon-size small"></span>
                              </a>
                          </li>
                          <li>
                              <a href="" ng-click="medium = true">
                                  <span class="icon-size medium"></span>
                              </a>
                          </li>
                          <li>
                              <a href="" ng-click="large = true">
                                  <span class="icon-size large"></span>
                              </a>
                          </li>
                          <li>
                              <a href="" ng-click="xlarge = true">
                                  <span class="icon-size xlarge"></span>
                              </a>
                          </li>
                      </ul>
                  </div>
               </div>

Мне нужно добавить класс в .component на основе щелчка тега из неупорядоченного списка. Мне нужно добавить класс small в .component, если щелкнуть первый элемент, а затем, если щелкнуть другой элемент, мне нужно удалить малый класс и добавить соответствующий класс из этого тега A.

В настоящее время он добавляет им классы, но не удаляет те, которые были добавлены ранее.

В основном мне нужно создать своего рода переключатель между ними 4 класса


angularjs ng-class
person TSlegaitis    schedule 16.03.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я бы сказал, используйте для этого отдельную переменную customClass

ng-class="customClass"

Затем разметка

<ul>
    <li>
        <a href="" ng-click="customClass = 'small'">
            <span class="icon-size small"></span>
        </a>
    </li>
    <li>
        <a href="" ng-click="customClass = 'medium'">
            <span class="icon-size medium"></span>
        </a>
    </li>
    <li>
        <a href="" ng-click="customClass = 'large'">
            <span class="icon-size large"></span>
        </a>
    </li>
    <li>
        <a href="" ng-click="customClass = 'xlarge'">
            <span class="icon-size xlarge"></span>
        </a>
    </li>
</ul>
person Pankaj Parkar    schedule 16.03.2016

arrow_upward
1
arrow_downward

Пытаться:

ng-class="small ? 'small' : medium ? 'medium' : large: 'large : xlarge ? 'xlarge' : ''"
person Mike Jerred    schedule 16.03.2016
comment
Привет, Майк, я думаю, что есть проблема с синтаксисом, и кажется, что после того, как я попытался это исправить, добавляется только небольшой класс ng-class={'small' : small ? 'средний': средний? 'большой': большой? 'большой' : большой} - person TSlegaitis; 16.03.2016
comment
Избавьтесь от фигурных скобок :) это другой синтаксис, когда вы пишете угловое выражение, которое оценивается как строка - person Mike Jerred; 16.03.2016
comment
Ах, я вижу, это не будет работать правильно с вашим кодом, потому что вы оставляете несколько переменных как истинные. Например. если щелкнуть по маленькому, то small = true, если нажать посередине, то middle = true, но по маленькому тоже верно. Ответ Панкаджа Паркара - лучший подход здесь - person Mike Jerred; 16.03.2016