angularjs - 动画文本角度

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

您需要像这样使用 ng-classng-class="{highlighted: chBeamer}"并将其添加到构成您的列的所有元素中。这样，当 chBeamer 为真时（当您单击复选框时），元素将获得突出显示的类

Answer 2

你快到了——这是一个完成你想要的例子（我认为）。

index.html（请注意我们如何将类分配给highlight复选框td模型为真时：

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