Изменить цвет TH с помощью ng-click

Question

Я хочу изменить цвет моей ячейки, когда я нажимаю на свой th, но когда я нажимаю, мой цвет не сохраняется.

Я хочу, чтобы, когда я нажимаю второй раз на другую кнопку моя первая th не держит Color

HTML:

.... 



<script type="text/ng-template" id="custom-footer" > 
     <div> 
      <table cellspacing="0" cellpadding="0" ng-controller="SearchController" 
        style="border:solid 1px black; font-family:verdana; font-size:12px;"> 
       <thead> 
       <tr style="background-color:lightgrey;"> 
        <th style="width:20px;" ng-class="{'selected'}" ng-click="changeTime('0')">Journée</th> 
        <th style="width:20px;" ng-class="{'selected'}" ng-click="changeTime('1')">Matin</th> 
        <th style="width:20px;" ng-class="{'selected'}" ng-click="changeTime('2')">Midi</th> 
        <th style="width:20px;" ng-class="{'selected'}" ng-click="changeTime('3')">Soir</th> 
       </tr> 
       </thead> 
       {{test}} 
      </table> 
     </div> 
    </script> 
    <div class="ui-datepicker-calendar columns small-3"> 
     <input type="text" ng-model="goDate" ng-click="updateDatePicker()" 
       placeholder="Date d'aller" datepicker/> 
    </div> 

Контроллер:

angular.module('matrixarSearch', [ 
    'mm.foundation', 
    'matrixarAutocomplete', 
    'matrixarCalendar' 
]).controller('SearchController', function ($scope, $translate) { 

    var init = function(){ 
     $scope.time=''; 


     $scope.changeTime = function(val){ 
      $scope.time = val; 
      console.log($scope); 
     }; 
}); 

Директива:

(function() { 
    var mod = angular.module('matrixarCalendar', []); 

    mod.directive('datepicker', function ($compile) { 
     return { 
      restrict: 'A', 
      require: 'ngModel', 
      link: function (scope, elem, attrs, ngModelCtrl) { 
       var updateModel = function (dateText) { 
        // call $apply to bring stuff to angular model 
        scope.$apply(function() { 
         ngModelCtrl.$setViewValue(dateText); 
        }); 

       }; 

       scope.updateDatePicker = function() { 
        $compile($.datepicker.dpDiv.append($('#custom-footer').contents().text()))(scope); 
       }; 
       var options = { 
        dateFormat: 'dd/mm/yy', 
        numberOfMonths: 2, 
        autoSize: true, 
        autoclose: true, 
        minDate: new Date(), 
        onSelect: function (dateText) { 
         updateModel(dateText); 
        } 
       }; 
       elem.datepicker(options); 
      } 
     }; 
    }); 
}()); 

CSS:

.selected { 
    background: red; 
} 

Answer 1

Добавить для каждого из заголовков следующее правило:

<th style="width:20px;" class="{{time == '0'? 'selected' : ''}}" ng-click="changeTime('0')">Journée</th> 
<th style="width:20px;" class="{{time == '1'? 'selected' : ''}}" ng-click="changeTime('1')">Matin</th> 
<th style="width:20px;" class="{{time == '2'? 'selected' : ''}}" ng-click="changeTime('2')">Midi</th> 
<th style="width:20px;" class="{{time == '3'? 'selected' : ''}}" ng-click="changeTime('3')">Soir</th> 

нг-класс ожидать логическое exprssion от контроллера, так что если вы хотите использовать нг-класс, который вы должны сохранить объект, помните, какой из них является активным один

Answer 2

angular.module('matrixarSearch', [ 
'mm.foundation', 
'matrixarAutocomplete', 
'matrixarCalendar' 
]).controller('SearchController', function ($scope, $translate) { 

var init = function(){ 
    $scope.time=''; 
    $scope.toggleClass = false; 

    $scope.changeTime = function(val){ 
     $scope.toggleClass = !$scope.toggleClass; 
     $scope.time = val; 
     console.log($scope); 
    }; 
}); 

Шаблон:

  <thead> 
      <tr style="background-color:lightgrey;"> 
       <th style="width:20px;" ng-class="{'selected': toggleClass}" ng-click="changeTime('0')">Journée</th> 
       <th style="width:20px;" ng-class="{'selected': toggleClass}" ng-click="changeTime('1')">Matin</th> 
       <th style="width:20px;" ng-class="{'selected': toggleClass}" ng-click="changeTime('2')">Midi</th> 
       <th style="width:20px;" ng-class="{'selected': toggleClass}" ng-click="changeTime('3')">Soir</th> 
      </tr> 
      </thead>