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>

控制器：

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>

ng-class期望来自控制器的布尔值exprssion，所以如果你想使用ng-class，你必须维护一个记住哪一个是活动的对象

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>

通过ng-click更改颜色

2 个答案: