Comment implémenter le changement de couleur dans Angular

Cet article présente principalement le code de base consistant à cliquer sur la balise li dans Angular pour changer la couleur. Les amis dans le besoin peuvent s'y référer

Cliquez sur la balise li après une traversée ng-repeat pour changer la couleur de la bordure ;

code 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>

code js :

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

Description :

①Dans l'événement click de l'élément

, la méthode "li_click()" ajoutée dans l'objet $scope sera exécutée ;

②Dans cette méthode, le "$index( line value)" est transmis à la méthode en tant que paramètre réel et la valeur de l'attribut "focus" est définie sur la valeur "$index" ;

③ Par conséquent, lorsqu'une ligne d'élément < li > est cliqué, "focus" La valeur de l'attribut deviendra le "$index" correspondant

④ À ce moment, l'instruction de style "ng-class" de l'élément < doit être ajouté à l'élément via l'objet clé/valeur, car lorsque l'on clique sur l'élément < li >, la valeur de la variable "$index" est la même que la valeur de l'attribut "focus", ce qui signifie que le retour est effectué. la valeur de "$index==focus" est vraie ;

⑤Ceci Vous devez comprendre que la valeur de l'instruction de style de "ng-class" devient "focus" ;

⑥Après l'analyse ci-dessus et opération, nous avons réalisé l'ajout d'une bordure en cliquant sur l'élément < li > L'effet.

style CSS :

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

Ce qui précède est ce pour quoi j'ai compilé tout le monde. J’espère que cela sera utile à tout le monde à l’avenir.

Articles connexes :

Comment implémenter le cinéma 3D à l'aide de three.js

Comment implémenter le composant de menu coulissant latéral dans Vue

Comment implémenter le développement multi-pages dans webpack

Méthode de traitement standard dans Vue (tutoriel détaillé)

Comment déployer https à l'aide de nginx + node

Comment implémenter le composant clavier numérique à l'aide de Vue

Interprétation détaillée du père-fils communication dans vue

Introduction détaillée à l'utilisation de ref ($refs) dans Vue.js

$refs accède au DOM dans Vue ( tutoriel détaillé)

Comment implémenter l'effet d'interdiction coulissante sur la page inférieure sous la fenêtre pop-up dans jQuery

Comment implémenter l'attribut confirmation à l'aide de types d'accessoires dans React Native

Système de grille Bootstrap (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!