在Angular中如何實現顏色變化

這篇文章主要介紹了Angular中點擊li標籤實現更改顏色的核心代碼,需要的朋友可以參考下

點擊ng-repeat遍歷後的li標籤，實現更改border顏色；

html程式碼：

<ul ng-if="params.questionTypeId == 8">
<li class="gamePre-def" ng-repeat=" word in wordsDef" ng-click=&#39;li_click($index)&#39;
ng-class=&#39;{focus: $index == focus}&#39;> {{word}}</li>
</ul>

js程式碼：

$scope.li_click = function (i) {
$scope.focus = i;
};

說明：

①在< li >元素的單擊事件中，將執行$scope物件中新增的"li_click()"方法;

②在該方法中將"$index(行號值)"作為實參傳給方法，並將"focus"屬性值設為「$index」值；

③因此當點選某行< li >元素時,"focus"屬性值將變為對應的"$index"；

④此時,< li >元素的"ng-class"樣式指令透過key/value物件的方式指定該元素需要新增的樣式,由於點擊< li >元素時，"$index"變數值和"focus"屬性值相同，也就是說"$index==focus"的回傳值為true；

⑤此時您應該明白了，"ng-class"的樣式指令值變為"focus";

⑥經過上面的分析及操作，我們實現了單擊< li >元素時,添加border的效果.

css樣式：

ul .focus {
border: 1px solid blue;
}

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

使用three.js如何實作3D戲院

在Vue中如何實作側滑選單元件

在webpack中如何實作多頁面開發

在Vue中標準的處理方法（詳細教學）

使用nginx node如何部署https

使用Vue如何實作數字鍵盤元件

在vue中詳細解讀父子通訊

#詳細介紹Vue.js中ref ($refs)用法

#$refs存取Vue中的DOM（詳細教學）

在jQuery中如何實作彈窗下底部頁面禁止滑動效果

#在React Native中使用prop-types如何實作屬性確認

Bootstrap柵格系統（詳細教學）

以上是在Angular中如何實現顏色變化的詳細內容。更多資訊請關注PHP中文網其他相關文章！