Zulassen Tabellenspalte Farbe zu ändern, wenn Kontrollkästchen

Question

Fiddle klicken: http://jsfiddle.net/Lvc0u55v/2156/ (nCore)

ich einen Tisch habe, und ich bin versucht, es zu machen, so dass, wenn ein oder mehr Kontrollkästchen in der Tabelle angeklickt werden, das gesamte Kontrollkästchen Spalte ändert die Farbe.

Zum besseren Verständnis, ich will es so aussehen, bevor (die ich bereits jetzt) ​​angeklickt werden:

Und das ist, was ich es nach einem oder mehreren Boxen aussehen wollen, sind geklickt haben:

Hier ist der HTML ich für das Netz haben:

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

Nicht sicher, wo von hier aus zu gehen, um diese Änderung zu machen. Völlig verloren auf was in der Javascript-Funktion enthalten ist. Würde ich ng-show verwenden und auf "true" setzen, wenn ausgewählt?

Answer 1

versuchen, etwas wie folgt aus:

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