Angular中點(diǎn)擊li標(biāo)簽實(shí)現(xiàn)更改顏色的核心代碼
點(diǎn)擊ng-repeat遍歷后的li標(biāo)簽，實(shí)現(xiàn)更改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;
};
說明：
①在< li >元素的單擊事件中，將執(zhí)行$scope對(duì)象中添加的"li_click()"方法;
②在該方法中將"$index(行號(hào)值)"作為實(shí)參傳給方法，并將"focus"屬性值設(shè)為“$index”值；
③因此當(dāng)單擊某行< li >元素時(shí),"focus"屬性值將變?yōu)橄鄳?yīng)的"$index"；
④此時(shí),< li >元素的"ng-class"樣式指令通過key/value對(duì)象的方式指定該元素需要添加的樣式,由于單擊< li >元素時(shí)，"$index"變量值和"focus"屬性值相同，也就是說"$index==focus"的返回值為true；
⑤此時(shí)您應(yīng)該明白了，"ng-class"的樣式指令值變?yōu)?focus";
⑥經(jīng)過上面的分析及操作，我們實(shí)現(xiàn)了單擊< li >元素時(shí),添加border的效果.
css樣式：
ul .focus {
border: 1px solid blue;
}
總結(jié)
以上所述是小編給大家介紹的Angular中點(diǎn)擊li標(biāo)簽實(shí)現(xiàn)更改顏色，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了淺析AngularJs HTTP響應(yīng)攔截器的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要為大家介紹了詳解如何在Angular中引入Mock.js實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
Angular5中狀態(tài)管理的實(shí)現(xiàn)
這篇文章主要介紹了Angular5中狀態(tài)管理的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
AngularJs IE Compatibility 兼容老版本IE
本文主要介紹AngularJs IE Compatibility 兼容老版本IE的問題及解決辦法，有興趣的小伙伴可以參考下2016-09-09
AngularJS $on、$emit和$broadcast的使用
本文主要介紹AngularJS $on、$emit和$broadcast的使用,這里整理了詳細(xì)的資料及簡(jiǎn)單示例代碼有興趣的小伙伴可以參考下2016-09-09
Angular Universal 主要關(guān)注將 Angular App 如何進(jìn)行服務(wù)端渲染和生成靜態(tài) HTML，對(duì)于用戶交互復(fù)雜的 SPA 并不推薦使用 SSR，本文是在 Angular 14 環(huán)境中完成，有些內(nèi)容對(duì)于新的 Angular 版本可能并不適用，感興趣的朋友一起通過本文學(xué)習(xí)2022-11-11
Angular.JS學(xué)習(xí)之依賴注入$injector詳析
隨著javaEE的spring框架的興起，依賴注入（IoC）的概念徹底深入人心，它徹底改變了我們的編碼模式和思維。在AngularJS中也有依賴注入的概念，像spring中的依賴注入，但是又有所不同。Angular中只需要在需要的地方聲明一下即可，類似模塊的引用，因此十分方便。2016-10-10
每個(gè)Angular版本在其生命周期中都經(jīng)歷了各個(gè)階段。組件在Angular中起著關(guān)鍵作用; 在這里，本文將討論Angular中的組件生命周期以及它們?nèi)绾斡绊懣蚣芩邪姹镜纳芷凇?/div> 2021-05-05
這篇文章主要介紹了angular6 填坑之sdk的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
Angular2學(xué)習(xí)筆記之?dāng)?shù)據(jù)綁定的示例代碼
本篇文章主要介紹了Angular2學(xué)習(xí)筆記之?dāng)?shù)據(jù)綁定的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01最新評(píng)論