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 个答案: