离子物品列表 - 点击物品并更改其他人的类别

如何操作物品列表的类别？例子：离子物品列表 - 点击物品并更改其他人的类别

<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所有其他项目的颜色。我怎么做？

来源

2016-08-03 VMCO

退房[用于'NG-class'指令的角文档]（https://docs.angularjs.org/api/ng/directive/ngClass）。 – Lex

嗨，我很抱歉，但我没有得到它。你可以解释吗？ – VMCO

我添加了一个答案，以非常简单的方式展示了“ng-class”的使用。 – Lex

下面是一个非常简单的，非生产值得您如何使用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>

来源

2016-08-04 13:57:01 Lex

谢谢。它为我工作。 – VMCO

离子物品列表 - 点击物品并更改其他人的类别

回答

相关问题