更改在angularjs中未選中的行的背景色

Question

我有一個從ng-repeat生成的表。 每行都有一個復選框。 我希望選中的行更改其背景顏色。 我正在嘗試使用ng-class進行嘗試，但並沒有幫助，一旦選中一個復選框，所有行的背景都會改變。我了解錯誤所在，但不知道如何解決。

這是我的桌子

<table >
        <tr>
        <th>Select</th>
        <th>Job List</th>
        <th>Next Firing</th>
        </tr>
         <tr ng-repeat="x in jobs" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="myclass">
            <td style="width: 247px; "><input type="checkbox" ng-model="x.checked" ng-click=countChecked($index)></td>
            <td style="width: 247px; ">{{ x.Name }}</td>
            <td style="width: 247px; ">{{ x.ID }}</td>
        </tr>
        </table>

這是我的控制器

$scope.countChecked = function(index){
        var count = 0;
        angular.forEach($scope.jobs, function(job){
            if (job.checked) {
                count++;
                $scope.myclass='selected';

            }
        });
    return count;
    }

我需要將“計數”用於其他目的，這很好。

這是選擇的CSS

.selected{
    background-color: #DEB887;

    }

Answer 1

選擇job可以使用ngClass指令為它提供特定的類，如下所示：

<ANY ... ng-class="{ 'selected': x.checked }">
    ...
</ANY>

Answer 2

只需通過以下代碼段即可。

 var app = angular.module('MyApp', []); app.controller('MyController', function($scope, $filter) { $scope.Customers = [{ CustomerId: 1, Name: "Prashant Olekar", Country: "United States", }, { CustomerId: 2, Name: "Hemant K", Country: "India", }, { CustomerId: 3, Name: "Richard", Country: "France", }, { CustomerId: 4, Name: "Robert Schidner", Country: "Russia", } ]; $scope.checkedCount = function() { return $scope.Customers.filter(function(orders) { return orders.select; }).length; } })

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <style> .selected { background-color: #E0F7FA; } </style> </head> <body style="margin: 30px;"> <div ng-app="MyApp" ng-controller="MyController"> <div class="container-fluid" style="margin-top: 40px;"> <div class="row"> <div class="col-md-12"> <div class="pull-right"> <span style="font-size: 20px; margin-right: 50px;">Total Checked : {{checkedCount()}}</span> </div> </div> <div class="col-md-12"> <table class="table table-condensed table-bordered text-center"> <thead style="background-color: #607D8B; color: white"> <tr> <td></td> <th>Customer Id</th> <th>Name</th> <th>Country</th> </tr> </thead> <tbody ng-repeat="c in Customers"> <tr ng-class="{ 'selected': c.select }"> <td> <input id="mainCheck" type="checkbox" ng-change="chkselect_onchange(Customers,c)" ng-model="c.select" /></td> <td>{{c.CustomerId}}</td> <td>{{c.Name}}</td> <td>{{c.Country}}</td> </tr> </tbody> </table> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>

更改在angularjs中未選中的行的背景色

問題描述

2 個解決方案

解決方案1
3 2016-10-07 11:27:29

解決方案2
0 2018-10-05 08:38:02

更改在angularjs中未選中的行的背景色

問題描述

2 個解決方案

解決方案1 3 2016-10-07 11:27:29

解決方案2 0 2018-10-05 08:38:02

解決方案1
3 2016-10-07 11:27:29

解決方案2
0 2018-10-05 08:38:02