이 글에서는 Angular에서 li 태그를 클릭하여 색상을 변경하는 핵심 코드를 주로 소개합니다. 필요하신 분들은 참고하시면 됩니다.
테두리 색상을 변경하려면 ng-repeat 순회 후 li 태그를 클릭하세요. :
<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; };지침:
①25edfb22a4f469ecb59f1190150159c6 요소의 클릭 이벤트에서 $scope 객체에 추가된 "li_click()" 메서드가 실행됩니다. ②이 메소드에서는 "$index(행 번호 값)"이 실제 매개변수로 메소드에 전달되고 "focus" 속성 값이 "$index" 값으로 설정됩니다. 8b5f8b1972378d9df41b5958cd285f77 요소를 클릭하면 "focus" 속성 값이 해당 "$index"로 변경됩니다. 이때 8b5f8b1972378d9df41b5958cd285f77 키/값 개체를 통해 요소에 추가해야 하는 스타일입니다. < li > "$index==focus"의 반환 값이 true입니다.
⑤ 이제 이해해야 합니다. 이제 "ng-class"의 스타일 명령 값이 "focus"로 변경됩니다. , 8b5f8b1972378d9df41b5958cd285f77 요소를 클릭하면 테두리가 추가되는 효과를 얻었습니다.css 스타일 :
ul .focus { border: 1px solid blue; }위 내용은 나중에 모든 사람에게 도움이 되기를 바랍니다. . 관련 기사:
3.js를 사용하여 3D 시네마를 구현하는 방법
Vue에서 측면 슬라이딩 메뉴 구성 요소를 구현하는 방법
webpack에서 다중 페이지 개발을 구현하는 방법
Standard in Vue 처리 방법(자세한 튜토리얼)
nginx + 노드를 사용하여 https를 배포하는 방법
Vue를 사용하여 숫자 키보드 구성 요소를 구현하는 방법
vue에서 아버지와 아들 간의 통신에 대한 자세한 해석
$refs Vue의 DOM에 액세스(자세한 튜토리얼)
jQuery의 팝업 창 아래에서 슬라이딩 효과를 비활성화하는 하단 페이지 구현 방법
React Native에서 prop-type을 사용하는 방법 속성 확인 구현
위 내용은 Angular에서 색상 변경을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!