CODEWITHSUNDEEP
htmlcssangularjs
cyberoy
cyberoy

Reputation: 373

Change the color when select by clicking using Javascript CSS

I have a calendar with date and time slots. After selecting date, time slots will come. From there you can select the time by clicking. Now, I want to change the color of selected item in time slot. Suppose, if you click on 11AM-12PM time slot then it should get red color and then you click on next time, i.e. 12PM-1PM, so 12PM-1Pm will get red color and son on. I have tried by using focus, it is not working. As I am already using hover. May be for that reason focus and hover not working at same time. May be I need to use something onclick. I have added my plunker code below. This is CSS :

.frame {
    width: 100%;
    height: 400px;

    margin-left: 0%;
    border: 1px solid #777777;
    overflow: auto;
}

.datepicker {
    width: 100%;
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.datepicker li {
    cursor: pointer;
    border-bottom: 1px solid #ededed;
    padding: 10px;
}
.datepicker li:hover {
    background: #EEE;
}
.text-center {
    text-align: center;
}

.border {
    border: 1px solid red;
}

Plunker link

Upvotes: 0

Views: 187

Answers (2)

Ernest
Ernest

Reputation: 2949

You can target selected item via $index and then add a class to it using ng-class directive. Basically, you need to:

  1. Add selected time index variable to your scope:

    $scope.selectedTimeIndex = -1;

  2. Pass $index to selectTime and conditionally add selected class:

    <li ng-click="selectTime(time, $index)" ng-class="{selected: $index == selectedTimeIndex}" ng-repeat="time in timeValues">{{time}}</li>

  3. Change selectedTimeIndex on selectTime call:

    $scope.selectTime = function(time, index) {
    $scope.selectedTimeIndex = index;
    // The rest of your function.
};

  4. Add selected class to your .css:

    .selected {
    background: red;
}

Simple example here.

Upvotes: 1

Natural Lam
Natural Lam

Reputation: 742

Yes, as @Chris said, you need to use Javascript because you want to show that upon click.

I am not familiar with AngularJs, but conceptually u can add the class

.selected {
   background-color: red;
}

And then add this class to the selected item and remove that from the lastSelected item.

Upvotes: 0

Related Questions