change background color when clicked

Question

I have written code which shows morning and evening times, the code is working fine,but the issue is that, say when I select a time by clicking, I want only that time's background-color to be changed and not of all.

For example, first I select 9:30, then 9:30 should be selected with a background color, again If I select 10:00 then previously selected 9:30's selected background color should disappear and the corresponding color should be applied to 10:00.

can anyone please tell me some solution for this?

My code is as given below

JSFiddle

<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

Please check working example Demo

Controller

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

Using ng-repeat would be best. However if you want to go ahead with static way instead of using ng-repeat you can make a directive. Here is the 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

Firstly, you should create your times using ng-repeat by creating a scope array in your controller :

$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},
];

Then add something like this to your template :

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

As you can see, each object has its time and a selected attribute . Plus, it triggers a function setSelection($index) on click, which will reset all array objects and sets the right one (based on its index) to true :

$scope.setSelected = function(index) {
    angular.forEach($scope.morningtimes, function(item) {
        item.selected = false;
    })
    $scope.morningtimes[index].selected = true;
}

Everything together: Fiddle

Answer 4

You should move some logic to the controller instead of the template. I updated your fiddle with a solution:

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

Controller:

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

Basically we're moving the times to display to the controller, and using ng-repeat in the template to display them.

Answer 5

using jQuery solution is simple: see this fiddle . Code is this:

jQuery(document).ready( function () {

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