Angular 에서 li 탭 을 클릭 하여 색상 변경 을 위 한 핵심 코드

1414 단어 angularjsli 태그
ng-repeat 가 옮 겨 다 니 는 li 탭 을 누 르 면 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;
};
설명:
  • 요소 의 클릭 이벤트 에서$scope 대상 에 추 가 된"li"를 실행 합 니 다.click()"방법;
    ② 이 방법 에서"$index(줄 번호 값)"를 실제 참조 방법 으로 하고"focus"속성 값 을"$index"값 으로 설정 합 니 다.
    ③ 따라서 한 줄 의
  • 요 소 를 클릭 하면"focus"속성 값 은 해당 하 는"$index"로 변 합 니 다.
    ④ 이때
  • 요소 의"ng-class"스타일 명령 은 key/value 대상 을 통 해 이 요소 가 추가 해 야 할 스타일 을 지정 합 니 다.
  • 요 소 를 눌 렀 을 때"$index"변수 값 은"focus"속성 값 과 같 기 때 문 입 니 다.즉,"$index==focus"의 반환 값 은 true 입 니 다.
    ⑤"ng-class"의 스타일 명령 값 이"focus"로 변 한 다 는 것 을 알 아야 합 니 다.
    ⑥ 위의 분석 과 조작 을 통 해 우 리 는
  • 요 소 를 클릭 할 때 border 를 추가 하 는 효 과 를 실현 합 니 다.
    css 스타일:
    
    ul .focus {
    border: 1px solid blue;
    }
    총결산
    위 에서 말 한 것 은 편집장 이 소개 한 Angular 에서 li 라벨 을 클릭 하여 색상 을 변경 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
  • 좋은 웹페이지 즐겨찾기