CODEWITHSUNDEEP
angularjsbuttonangularjs-ng-clickng-class
Dave
Dave

Reputation: 1277

ng-class for selected button

I'm building a widget in ServiceNow and am trying to incorporate some css styling for a selected button. After digging around online, I think I got the basic structure down, but am still a bit confused about how to ensure a button has been selected and then styling it accordingly.

Below is what my HTML looks like:

<div class="chiclets">
   <button class="btn btn-slots" ng-class="{'btn-selected':selectedSlot.apptTime == slot.apptTime }" ng-click="selectedSlot = time" ng-repeat="time in c.availTime">{{time.apptTime}}</button>
</div>

This produces a set of available time slots from my c.availTime object array: enter image description here

My client script for the object array looks like this:

$scope.getTimeSlots = function(date, place) {
        date = moment(date).format("YYYY-MM-DD")
        //every time a date is chosen, first clear time array
        c.availTime = [];
        for(var a=0; a<c.data.avail.length; a++){
            if(date == c.data.avail[a].start_date && place == c.data.avail[a].appointment_location) {               

                c.availTime.push({
                    apptTime:c.data.avail[a].start_time,
                    availability: c.data.avail[a].availability
                });
            }
        }
};

My question is if a user clicks on 9am time slot for example, is my ng-click capturing that time correctly. If so, how do I format my ng-class so that the btn-selected class has a background of red (for example).

Thanks!

Upvotes: 2

Views: 3162

Answers (2)

Sunil
Sunil

Reputation: 138

Create one more property isSelected = false and set it as true on ng-click and apply class if isSelected property is true.

See code below

css 

<style>
.btn-selected {backgraound-color:red}
</style>

html 

<div class="chiclets">
 <button class="btn btn-slots" ng-class="{'btn-selected':time.isSelected == true }" ng-click="btnClick($index)" ng-repeat="time in c.availTime">{{time.apptTime}}</button>
</div>

Js

$scope.getTimeSlots = function(date, place) {
    date = moment(date).format("YYYY-MM-DD")
    //every time a date is chosen, first clear time array
    c.availTime = [];
    for(var a=0; a<c.data.avail.length; a++){
        if(date == c.data.avail[a].start_date && place == c.data.avail[a].appointment_location) {               

            c.availTime.push({
                apptTime:c.data.avail[a].start_time,
                availability: c.data.avail[a].availability,
                 isSelected : false
            });
        }
    }
};
 $scope.btnClick  = function(index) {
     angular.foreach( c.availTime,function(v,k){
       if(k == index){
         v.isSelected  = true;
       } else {
         v.isSelected  = false;
       }
})
}

Upvotes: 0

PhiLho
PhiLho

Reputation: 41132

Your test is selectedSlot.apptTime == slot.apptTime.

Shouldn't it be selectedSlot.apptTime == time.apptTime?

Because I don't see a slot variable.

I guess the test could even be selectedSlot == time (same reference).

Upvotes: 1

Related Questions