Javascript 通过单击更改颜色

我想在单击我的

th

时更改单元格的颜色，但当我单击时，我的颜色不保留

我希望当我第二次点击另一个按钮时，我的第一个

th

不会保持颜色

HTML:

指令：

CSS:

---

为每个标题添加以下规则：

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

journe
马汀
迷笛
土

ng类期望从控制器得到一个布尔表达式，所以如果您想使用ng类，您必须维护一个对象，记住哪个对象是活动对象

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>

日记
马汀
迷笛
土

.selected {
    background: red;
}

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

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>