Ionic Item List - Нажмите на предмет и измените класс других

Question

Ionic Item List - Нажмите на предмет и измените класс других

0

Как управлять классом списка предметов? Пример:

<ul class="list">
  <li class="item"> Item 1</li>
  <li class="item"> Item 2</li>
  <li class="item"> Item 3</li>
  <li class="item"> Item 4</li>
</ul>

Если я нажму пункт 1, я хочу изменить цвет bg всех остальных элементов. Как мне это сделать?

VMCO 04 авг. 2016, в 00:46

Источник

0

Посмотрите документы Angular для директивы ng-class .
Lex 03 авг. 2016, в 22:35
0

Привет, извините, но я не понимаю. Вы можете объяснить?
VMCO 04 авг. 2016, в 13:12
0

Я добавил ответ, демонстрирующий использование ng-class очень упрощенным способом.
Lex 04 авг. 2016, в 13:57

Показать ещё 1 комментарий

Теги:

ionic-framework

angularjs

1 ответ

Ещё вопросы

Посмотрите документы Angular для директивы ng-class .
Привет, извините, но я не понимаю. Вы можете объяснить?
Я добавил ответ, демонстрирующий использование ng-class очень упрощенным способом.

Lex · Accepted Answer · 2016-08-04T11-16-00.000Z

Вот очень простой, непроизводственный достойный образец того, как вы можете использовать ng-class для выполнения того, что вам нужно. Щелчок по любому из элементов списка сделает фон на оставшихся элементах красным. Это выполняется с использованием локальной переменной области, которая устанавливается с помощью ng-click а затем проверяет значение этой переменной в ng-class.

.red {
  background-color: red;
}
.clear {
  background-color: none;
}
.item {
  cursor: pointer;
  width: 75px;
  margin: 5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app>
  <ul class="list" ng-init="selectedItem = 0">
    <li class="item" ng-class="{clear: selectedItem === 1, red: selectedItem !== 1 && selectedItem !== 0}" } ng-click="selectedItem = 1">Item 1</li>
    <li class="item" ng-class="{clear: selectedItem === 2, red: selectedItem !== 2 && selectedItem !== 0}" } ng-click="selectedItem = 2">Item 2</li>
    <li class="item" ng-class="{clear: selectedItem === 3, red: selectedItem !== 3 && selectedItem !== 0}" } ng-click="selectedItem = 3">Item 3</li>
    <li class="item" ng-class="{clear: selectedItem === 4, red: selectedItem !== 4 && selectedItem !== 0}" } ng-click="selectedItem = 4">Item 4</li>
  </ul>

Благодарю. Это сработало для меня.