Angular에서 색상 변경을 구현하는 방법

이 글에서는 Angular에서 li 태그를 클릭하여 색상을 변경하는 핵심 코드를 주로 소개합니다. 필요하신 분들은 참고하시면 됩니다.

테두리 색상을 변경하려면 ng-repeat 순회 후 li 태그를 클릭하세요. :

<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;
};

지침:

①

요소의 클릭 이벤트에서 $scope 객체에 추가된 "li_click()" 메서드가 실행됩니다. ②이 메소드에서는 "$index(행 번호 값)"이 실제 매개변수로 메소드에 전달되고 "focus" 속성 값이 "$index" 값으로 설정됩니다. 요소를 클릭하면 "focus" 속성 값이 해당 "$index"로 변경됩니다. 이때 키/값 개체를 통해 요소에 추가해야 하는 스타일입니다. < li > "$index==focus"의 반환 값이 true입니다.

⑤ 이제 이해해야 합니다. 이제 "ng-class"의 스타일 명령 값이 "focus"로 변경됩니다. , 요소를 클릭하면 테두리가 추가되는 효과를 얻었습니다.

css 스타일 :

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

위 내용은 나중에 모든 사람에게 도움이 되기를 바랍니다. .

관련 기사:

3.js를 사용하여 3D 시네마를 구현하는 방법

Vue에서 측면 슬라이딩 메뉴 구성 요소를 구현하는 방법

webpack에서 다중 페이지 개발을 구현하는 방법

Standard in Vue 처리 방법(자세한 튜토리얼)

nginx + 노드를 사용하여 https를 배포하는 방법

Vue를 사용하여 숫자 키보드 구성 요소를 구현하는 방법

vue에서 아버지와 아들 간의 통신에 대한 자세한 해석

자세히 Vue.js의 ref 소개($refs) 사용법

$refs Vue의 DOM에 액세스(자세한 ​​튜토리얼)

jQuery의 팝업 창 아래에서 슬라이딩 효과를 비활성화하는 하단 페이지 구현 방법

React Native에서 prop-type을 사용하는 방법 속성 확인 구현

Bootstrap 그리드 시스템(자세한 튜토리얼)

위 내용은 Angular에서 색상 변경을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!