Question

<tr ng-repeat="player in players.items" 
    ng-click="SetSelectedItem(player)" 
    ng-class={'selected':SetSelectedItem}>
   <td>{{player.Name}}</td>
   <td>{{player.Id}} </td>
   <td>{{player.Surname}} </td>
</tr>

我正在使用CSS将我的bg行作为红色，但它适用于每一行，通过ng-click我可以选择特定的行，但我只需要突出显示所选的行

Answer 1

我希望它可以帮到你： - CSS：

tr.red{
        background-color: red;
}

HTML：

<div ng-app="myapp" ng-controller="myctrl">
    <table>
        <tbody>
        <tr ng-repeat="player in players" ng-click="togglered(player)" ng-class="{'red':tracker.isRed}">
            <td>{{player.Name}}</td>
            <td>{{player.Id}} </td>
            <td>{{player.Surname}} </td>
        </tr>
        </tbody>
    </table>
</div>

脚本：

angular.module('myapp',[])
            .controller('myctrl',function($scope){
                $scope.red = false;
                $scope.togglered  =  function(player){
                    player.isRed = ! player.isRed;
                };
                $scope.players =[
                    {'Name':'xyz','Id':2,'Surname':1,isRed:true},
                    {'Name':'abc','Id':4,'Surname':2,isRed:false},
                    {'Name':'klm','Id':6,'Surname':3,isRed:false},
                    {'Name':'yrt','Id':9,'Surname':4,isRed:true}
                ];

            });

View in Plunker

仅使用Bootstrap突出显示所选行，但现在我的整行都突出显示

1 个答案: