Question

我编写的代码显示早晚时间，代码工作正常，但问题是，当我通过点击选择时间时，我只希望那个时间background-color来改变而不是改变。

例如，首先我选择9:30，然后选择9:30用背景颜色，再次如果我选择10:00然后选择9:30选择的背景颜色应该消失并且相应的颜色应该适用于10:00。

有人可以告诉我一些解决方案吗？

我的代码如下所示

<div ng-app="myApp">
    <div ng-controller="AppCtrl">
        <div class="row">
            <div class="box col-md-6" style="width: 40%;height: 100%;  !important;padding-left: 15px;">
                <div class="ibox float-e-margins datetimepicker1 table-responsive">
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-4 b-r" style="text-align: center;">
                                 <h3 class="m-t-none m-b"><b>Morning</b></h3>

                                <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">9:00AM</div>
                                <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">9:30AM</div>
                                <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">10:00AM</div>
                                <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">10:30AM</div>
                                <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">11:00AM</div>
                                <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">11:30AM</div>
                            </div>
                            <div class="col-sm-8">
                                 <h3 class="m-t-none m-b"><center><b>Afternoon</b></center></h3>

                                <div class="col-md-12" style="text-align: center;">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="m-t-none m-b sm-time "  ng-class="{'selected': timeClass}" ng-click="timeClass=true">9:30AM</div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">9:30AM</div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">9:00AM</div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">9:30AM</div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">9:00AM</div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">9:30AM</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

请查看工作示例Demo

控制器

app.controller('AppCtrl', function ($scope) {
    $scope.morningTimes =['8.00AM','9.00AM','9.30AM','10.00AM','10.40AM'];
    $scope.selectedDate = '';

    $scope.setIndex = function(index) {
        $scope.selectedDate = index;
    }
});

HTML

<div class="m-t-none m-b sm-time" ng-class="{'selected':selectedDate == $index}" ng-click="setIndex($index)" ng-repeat="time in morningTimes">{{time}}</div>

Answer 2

使用ng-repeat是最好的。但是，如果您想继续使用静态方式而不是使用ng-repeat，您可以制定指令。这是jsFiddle https://jsfiddle.net/tech_ank/f2vLfxfu/16/

app.directive('whenClick', function(){
    return {
        restrict: 'A',
        link: function (scope, iElement, iAttr) {
            iElement.on("click", function () {

                iElement.parent().children().removeClass('selected');
                iElement.addClass('selected');
            });
        }
    };
});

Answer 3

首先，您应该通过在控制器中创建范围数组，使用reset --hard创建时间：

ng-repeat

然后将这样的内容添加到模板：

$scope.morningtimes = [
    {time: '9:00AM', selected: true},
    {time: '9:30AM', selected: false},
    {time: '10:00AM', selected: false},
    {time: '10:30AM', selected: false},
    {time: '11:00AM', selected: false},
    {time: '11:30AM', selected: false},
];

如您所见，每个对象都有时间和<div class="m-t-none m-b sm-time" ng-repeat="time in morningtimes" ng-class="{'selected': time.selected}" ng-click="setSelected($index)">{{time.time}}</div> 属性。此外，它会在点击时触发功能 selected，这将重置所有数组对象并将正确的（基于其索引）设置为 true ：

setSelection($index)

所有事情：Fiddle

Answer 4

您应该将一些逻辑移动到控制器而不是模板。我用解决方案更新了你的小提琴：

http://jsfiddle.net/5rkddz0u/1/

控制器：

$scope.changeHighlight = function(time) {
    $scope.highlightedTime = time;
}

$scope.highlightedTime = undefined;

$scope.morningTimes = ["9:00AM", "9:30AM","10:00AM","10:30AM","11:00AM","11:30AM"];

$scope.afternoonTimes = ["12:30PM", "13:00PM","13:30PM","14:00PM"];

HTML：

<div ng-repeat="time in morningTimes" class='m-t-none m-b sm-time' ng-class="{'selected':highlightedTime === time}" ng-click="changeHighlight(time)">{{time}}</div>

基本上我们将时间移动到显示控制器，并在模板中使用ng-repeat来显示它们。

Answer 5

使用jQuery解决方案很简单：see this fiddle。代码是这样的：

jQuery(document).ready( function () {

jQuery('.sm-time').click(function () {
 jQuery('.sm-time').removeClass('selected');
 jQuery(this).addClass('selected');
});

单击时更改背景颜色

5 个答案: