在Angular中如何實現顏色變化
- 亚连原創
- 2018-06-21 17:51:502699瀏覽
這篇文章主要介紹了Angular中點擊li標籤實現更改顏色的核心代碼,需要的朋友可以參考下
點擊ng-repeat遍歷後的li標籤，實現更改border顏色；
html程式碼：
<ul ng-if="params.questionTypeId == 8">
<li class="gamePre-def" ng-repeat=" word in wordsDef" ng-click='li_click($index)'
ng-class='{focus: $index == focus}'> {{word}}</li>
</ul>js程式碼：
$scope.li_click = function (i) {
$scope.focus = i;
};說明：
①在8b5f8b1972378d9df41b5958cd285f77元素的單擊事件中，將執行$scope物件中新增的"li_click()"方法;
②在該方法中將"$index(行號值)"作為實參傳給方法，並將"focus"屬性值設為「$index」值；
③因此當點選某行8b5f8b1972378d9df41b5958cd285f77元素時,"focus"屬性值將變為對應的"$index"；
④此時,8b5f8b1972378d9df41b5958cd285f77元素的"ng-class"樣式指令透過key/value物件的方式指定該元素需要新增的樣式,由於點擊8b5f8b1972378d9df41b5958cd285f77元素時，"$index"變數值和"focus"屬性值相同，也就是說"$index==focus"的回傳值為true；
⑤此時您應該明白了，"ng-class"的樣式指令值變為"focus";
⑥經過上面的分析及操作，我們實現了單擊8b5f8b1972378d9df41b5958cd285f77元素時,添加border的效果.
css樣式：
ul .focus {
border: 1px solid blue;
}上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
#在React Native中使用prop-types如何實作屬性確認
以上是在Angular中如何實現顏色變化的詳細內容。更多資訊請關注PHP中文網其他相關文章！
nginx jquery css bootstrap vue.js html angular webpack class 实参 JS 对象 事件 dom border li react native https
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn