Animate text angular

Question

I want to highlight a column in a table when a checkbox is checked. So I have this checkbox (chBeamer), when it's checked I want the column 'beamer' to highlight its text. But I have no idea how to start with this, I was thinking about using 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>

controller

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

Thanx for the help already!

Answer 1

You're almost there -- Here's an example accomplishing what you want (I think).

index.html (note how we assign the class highlight to the td when the checkbox model is true:

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

stylesheet:

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

You need to use ng-class as such ng-class="{highlighted: chBeamer}" and add it to all the elements that make your column. This way, the elements will gain the highlighted class when chBeamer is true (when you click on the checkbox)