텍스트 애니메이트 각도

Question

확인란을 선택하면 표의 열을 강조하고 싶습니다. 그래서이 체크 박스 (chBeamer)가 있는데, 'beamer'열에 텍스트를 강조 표시해야합니다. 하지만 어떻게 시작해야할지 모르겠다. ng-show를 사용하려고 생각하고 있었습니까?

HTML

<input ng-model="chBeamer" type="checkbox" id="chBeamer" name="chBeamer" /> 
      <label for="chBeamer"><span></span>Beamer</label><br/> 
<table id="listTable"> 
      <thead> 
       <tr> 
        <th></th> 
        <th scope="col" abbr="Type">Type</th> 
        <th scope="col" abbr="Beamer">Beamer</th> 
        <th scope="col" abbr="Capacity">Capacity</th> 
        <th scope="col" abbr="Size">Size</th> 
        <th scope="col" abbr="OpeningHours">Opening hours</th> 
        <th scope="col" abbr="Actions">Actions</th> 
       </tr> 
      </thead> 
      <tbody ng-repeat="r in c.rooms | filter:{level:levelId}"> 
       <tr> 
        <th scope="row"><a href="#/CampusOverview/{{c.id}}/{{levelId}}/{{r.roomName}}">{{r.roomName}}</a></th> 
        <td>{{r.type}}</td> 
        <td>{{r.beamer}}</td> 
        <td>{{r.capacity}}</td> 
        <td>{{r.size}}</td> 
        <td>{{r.openingHours}}</td> 
        <td>{{r.actions.length}}</td> 
       </tr> 
      </tbody> 
     </table> 

컨트롤러 이미 도움을

campusControllers.controller('campusListCtrl', ['$scope', '$routeParams', '$http', 
function ($scope, $routeParams, $http) { 
    $http.get(('campusses/' + $routeParams.campusId + '.json')).success(function (data) { 
     //$scope.campusId = $routeParams.campusId 
     $scope.levelId = parseInt($routeParams.levelId); 

     $scope.campus = data; 
    }); 
}]); 

고맙습니다!

Answer 1

거의 다 있어요 - Here's an example 당신이 원하는 것을 성취합니다.

index.html을 (우리가 지정하는 방법을 참고 체크 박스 모델은 사실이다 td에 클래스 highlight :

<input ng-model="chBeamer" type="checkbox" id="chBeamer" name="chBeamer" /> 
       <label for="chBeamer"><span></span>Beamer</label><br/> 
    <table id="listTable"> 
    <thead> 
     <tr> 
      <th></th> 
      <th scope="col" abbr="Type">Type</th> 
      <th scope="col" abbr="Beamer">Beamer</th> 
      <th scope="col" abbr="Capacity">Capacity</th> 
      <th scope="col" abbr="Size">Size</th> 
      <th scope="col" abbr="OpeningHours">Opening hours</th> 
      <th scope="col" abbr="Actions">Actions</th> 
     </tr> 
    </thead> 
    <tbody ng-repeat="r in c.rooms | filter:{level:levelId}"> 
     <tr> 
      <th scope="row"><a href="#/CampusOverview/{{c.id}}/{{levelId}}/{{r.roomName}}">{{r.roomName}}</a></th> 
      <td>{{r.type}}</td> 
      <td ng-class="{highlight: chBeamer}">{{r.beamer}}</td> 
      <td>{{r.capacity}}</td> 
      <td>{{r.size}}</td> 
      <td>{{r.openingHours}}</td> 
      <td>{{r.actions.length}}</td> 
     </tr> 
    </tbody> 
    </table> 
</body> 
</html> 

스타일 :

td { 
    /* animate background changes on the table cells */ 
    -moz-transition: background 0.25s ease-in-out; 
    -webkit-transition: background 0.25s ease-in-out; 
    -ms-transition: background 0.25s ease-in-out; 
    -o-transition: background 0.25s ease-in-out; 
    transition: background 0.25s ease-in-out; 
} 

.highlight { 
    background: rgba(255, 255, 0, 0.55); 
} 

Answer 2

이렇게 ng-class를 ng-class="{highlighted: chBeamer}"으로 사용하고 열을 만드는 모든 요소에 추가해야합니다. 이 방법을 사용하면 chBeamer가 true 일 때 (체크 박스를 클릭 할 때) 요소가 강조 표시된 클래스를 얻게됩니다.