单击复选框时允许表格列更改颜色

Question

小提琴：http://jsfiddle.net/Lvc0u55v/2156/ (nCore)

我有一张表格，我正在尝试制作它，以便当点击表格中的一个或多个复选框时，整个复选框列会改变颜色。

为了更好地理解，我希望它在被点击之前看起来像这样（我现在已经有了）：

这就是我希望它在单击一个或多个框后看到的内容：

这是我为网格准备的 HTML：

<table id="table-users" class="table table-condensed">
        <thead>
          <tr>
            <th>#</th>
            <th>
                User ID
                <a href="#" class="filter-link" ng-click="sortType = 'name'; sortReverse = !sortReverse" >
                <span class="glyphicon glyphicon-sort-by-alphabet"></span>
                <span ng-show="sortType == 'name' && !sortReverse"></span>
                <span ng-show="sortType == 'name' && sortReverse"></span></a>
            </th>
            <th>
                Notification Email
                <a href="#" class="filter-link" ng-click="sortType = 'email'; sortReverse = !sortReverse" >
                <span class="glyphicon glyphicon-sort-by-alphabet"></span>
                <span ng-show="sortType == 'email' && !sortReverse"></span>
                <span ng-show="sortType == 'email' && sortReverse"></span></a>
            </th>
            <th>
                Role
                <a href="#" class="filter-link" ng-click="sortType = 'type'; sortReverse = !sortReverse" >
                <span class="glyphicon glyphicon-sort-by-alphabet"></span>
                <span ng-show="sortType == 'type' && !sortReverse"></span>
                <span ng-show="sortType == 'type' && sortReverse"></span></a>
            </th>
            <th>
                Last Activity  
                <a href="#" class="filter-link" ng-click="sortType = 'lastActivity'; sortReverse = !sortReverse" >
                <span class="glyphicon glyphicon-sort-by-alphabet"></span>
                <span ng-show="sortType == 'lastActivity' && !sortReverse"></span>
                <span ng-show="sortType == 'lastActivity' && sortReverse"></span></a>             
            </th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="user in users | orderBy:sortType:sortReverse | filter:searching">
            <td>{{ $index+1 }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
            <td>
              <!--<span class="circle-user" ng-class="{'circle-admin': user.type === 'Admin'}"><span class="glyphicon glyphicon-user"></span></span>-->
              {{ user.type }}
            </td>
            <td>{{getLastDate(user.lastActivity) | date:'short'}}</td>
            <td><input id="multi-select" type="checkbox" ng-click="changeColumn()"></</td>
            <td>
              <span ng-hide="user.name === authInfo.user">
                <a href="#" ng-click="showUserAddDialog(user)">Edit</a>
              </span>
            </td>
            <td>
              <span ng-hide="user.name === authInfo.user">    
                <a href="#" ng-click="showDeleteUser(user.id,user.name)">Delete</a>
              </span>
              </td>
            <td>
              <span ng-hide="user.name === authInfo.user">
                <a href="#" ng-click="showResetPassword(user.name)">Reset</a>
              </span>
            </td>
          </tr>
        </tbody>
      </table>

JS：

$scope.changeColumn = function (){
     //Add code here that changes the CSS of that specific column so that it appears grey
}

不确定从这里到哪里进行此更改。完全不知道要包含在 javascript 函数中的内容。我会使用 ng-show 并在选择时将其设置为 true 吗？

Answer 1

试试这样的：

HTML：

<!-- Because this is in an ng-repeat (which creates it's own child scope), 
     you have to use $parent to get back to your original scope -->
<td ng-class="$parent.highlightCss">
    <input type="checkbox" ng-change="addChangeColumn()" ng-model="user.isChecked">
</td>

AngularJS：

$scope.addChangeColumn = function() {
  //check if any checkboxes have been checked
  var isAnyChecked = false;
  for (var i = 0, length = $scope.users.length; i < length; i++){
    if ($scope.users[i].isChecked){
      isAnyChecked = true;
      break;
    }
  }

  //if they have then set the $scope property to the style you want
  $scope.highlightCss = isAnyChecked ? 'highlight' : null;
};

CSS：

.highlight {
  background-color: gray;
}

JsFiddle