Question

如何操作项目列表类？示例：

<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颜色。我该怎么做？

Answer 1

这是一个非常简单，非生产的有价值的样本，说明如何使用ng-class来完成你所追求的目标。单击任何列表项将使剩余项目的背景变为红色。这是使用本地范围变量完成的，该变量使用ng-click设置，然后在ng-class中检查该变量的值。

＆＃13;

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

＆＃13;

<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>

＆＃13;

离子项目列表 - 单击项目并更改其他人的类别

1 个答案: