How to implement color change in Angular

This article mainly introduces the core code of clicking the li tag in Angular to change the color. Friends who need it can refer to

Click the li tag after ng-repeat traversal to change the border color;

html code:

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

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

Description:

① In the click event of the < li > element, the "li_click()" method added in the $scope object will be executed;

② In this method, "$index (line number value)" will be executed Pass it to the method as an actual parameter, and set the "focus" attribute value to the "$index" value;

③So when a row< li> element is clicked, the "focus" attribute value will change is the corresponding "$index";

④At this time, the "ng-class" style instruction of the

element specifies the style that needs to be added to the element through the key/value object. < li > element, the "$index" variable value is the same as the "focus" attribute value, which means that the return value of "$index==focus" is true;

⑤You should understand at this time Now, the style instruction value of "ng-class" changes to "focus";

⑥After the above analysis and operation, we have achieved the effect of adding a border when clicking the < li > element.

css style:

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement 3D cinema using three.js

##How to implement the side sliding menu component in Vue

How to implement multi-page development in webpack

Standard processing method in Vue (detailed tutorial)

How to deploy https using nginx node

How to implement the numeric keyboard component using Vue

Detailed interpretation of father-child communication in vue

Detailed introduction to the usage of ref ($refs) in Vue.js

$refs accesses the DOM in Vue (detailed tutorial)

How to implement the sliding ban effect on the bottom page under the pop-up window in jQuery

How to implement attribute confirmation using prop-types in React Native

Bootstrap grid system (detailed tutorial)

The above is the detailed content of How to implement color change in Angular. For more information, please follow other related articles on the PHP Chinese website!