AngularJS 스타일 추가,변색 설정 인 스 턴 스 코드 클릭

3772 단어 angular클릭 하여 변색
본 고 는 AngularJS 를 클릭 하여 스타일 을 추가 하고 변색 설정 의 인 스 턴 스 코드 를 클릭 하여 여러분 에 게 공유 하고 구체 적 으로 다음 과 같 습 니 다.
먼저 요 구 는 이 렇 습 니 다.목록 이 있 습 니 다.어떤 줄 을 클릭 할 때 어떤 줄 의 배경 이 회색 으로 변 하 는 지 JQ 에서 모두 가 알 고 있 습 니 다.이것 은 매우 쉬 운 것 입 니 다.addClass 를 추가 하면 됩 니 다.그러면 AngularJS 는 어떻게 실현 합 니까?

다음은 코드 부분 을 보 겠 습 니 다.

<!doctype html>
<html ng-app="a2_11">
<head>
  <title>      </title>
  <script src="../Script/angular.min.js"
      type="text/javascript"></script>
<style type="text/css">
  body{font-size:12px}
  ul{margin:0;padding:0;width:408px;list-style-type:none}
  ul li{float:left;padding:5px 0}
  ul .odd{color:#0026ff}
  ul .even{color:red}
  ul .bold{font-weight:700}
  ul li span{float:left;padding:0 10px;width:52px}
  ul .focus{background-color:#ccc}
</style>
</head>
<body>
  <div ng-controller="c2_11">
    <ul>
      <li ng-class="{{bold}}">
        <span>  </span>
        <span>  </span>
        <span>  </span>
        <span>    </span>
        <span>    </span>
      </li>
      <li ng-class-odd="'odd'"
        ng-class-even="'even'"
        ng-repeat=" stu in data"
        ng-click='li_click($index)'
        ng-class='{focus: $index==focus}'>
        <span>{{$index+1}}</span>
        <span>{{stu.name}}</span>
        <span>{{stu.sex}}</span>
        <span>{{$first?' ':' '}}</span>
        <span>{{$last?' ':' '}}</span>
      </li>
    </ul>
  </div>
  <script type="text/javascript">
    var a2_11 = angular.module('a2_11', []);
    a2_11.controller('c2_11', ['$scope', function ($scope) {
      $scope.bold = "bold";
      $scope.li_click = function (i) {
        $scope.focus = i;
      };
      $scope.data = [
      { name: "   ", sex: " " },
      { name: "   ", sex: " " },
      { name: "   ", sex: " " },
      { name: "   ", sex: " " }
      ];
    }]);
  </script>
</body>
</html>
1.우선,첫 번 째
  • 요소 의"ng-class"값 과"bold"속성 값 을 연결 하여 이 값 이 지정 한 스타일 을 굵게 합 니 다.이것 은 모두 가 알 아 볼 수 있 을 것 이 라 고 믿 습 니 다.
    2.'ng-class-odd'와'ng-class-even'스타일 을 사용 하여 각각 홀수 와 짝수 줄 의 스타일 을 연결 하여 줄 을 사이 에 두 고 색 을 바 꾸 는 기능 을 실현 합 니 다.
    3.마지막 으로 클릭 한
  • 요 소 를 어떻게 변색 시 키 는 지 설명 합 니 다.
     ①
  • 요소 의 클릭 이벤트 에서$scope 대상 에 추 가 된"li"를 실행 합 니 다.click()"방법;
     ② 이 방법 에서"$index(줄 번호 값)"를 실제 참조 방법 으로 하고"focus"속성 값 을"$index"값 으로 설정 합 니 다.
     ③ 따라서 한 줄 의
  • 요 소 를 클릭 하면"focus"속성 값 은 해당 하 는"$index"로 변 합 니 다.
     ④ 이때
  • 요소 의"ng-class"스타일 명령 은 key/value 대상 을 통 해 이 요소 가 추가 해 야 할 스타일 을 지정 합 니 다.
  • 요 소 를 눌 렀 을 때"$index"변수 값 은"focus"속성 값 과 같 기 때 문 입 니 다.즉,"$index==focus"의 반환 값 은 true 입 니 다.
     ⑤"ng-class"의 스타일 명령 값 이"focus"로 변 한 다 는 것 을 알 아야 합 니 다.
     ⑥ 위의 분석 과 조작 을 통 해 우 리 는
  • 요 소 를 클릭 할 때 배경 스타일 을 추가 하 는 효 과 를 실현 합 니 다.
     이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
    • Bootstrap+AngularJS 간단 한 데이터 필터 문자 찾기 기능 구현
    win 7 cmd 에서 vue 를 실행 하 는 것 은 내부 명령 의 해결 방법 이 아 닙 니 다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage