離子物品列表 - 點擊物品並更改其他人的類別

如何操作物品列表的類別？例子：離子物品列表 - 點擊物品並更改其他人的類別

<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

離子物品列表 - 點擊物品並更改其他人的類別

回答

相關問題