的HTML

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

Thanx已经帮助了！

Answer 1

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

Answer 2

你几乎就在那里 - Here's an example完成你想要的东西（我想）。

index.html （请注意当复选框模型为true时，我们如何将班级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);
}

动画文字角度

的HTML

控制器

2 个答案: