在angularjs中更改选中的行背景色

我有一个由ng-repeat生成的表。每一行都有一个复选框。我希望被选中的行改变它们的背景颜色。我正在尝试使用ng类，但没有帮助，只要我选择一个复选框，所有的行得到他们的背景改变。我知道错误是什么，但不知道如何解决。

这是我的表

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

我需要count用于不同的目的，它工作得很好。

选择css

.selected{
    background-color: #DEB887;
    }

当job被选中时，你可以使用ngClass指令给它指定一个特定的类，如下所示:

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

浏览下面的代码片段。

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>

相关内容

最新更新

热门标签：