javascript - 通过 ng-click 更改颜色

Question

我想在单击第 th 时更改单元格的颜色，但是当我单击时，我的颜色不保留。

我希望当我第二次点击另一个按钮时，我的第一个th不要保留颜色

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>

Controller :

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

为每个 header 添加以下规则:

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

ng-class 期望来自 Controller 的 bool 表达式，因此如果你想使用 ng-class，你必须维护一个对象来记住哪个是事件的