CODEWITHSUNDEEP
javascriptangularjs
Nelson
Nelson

Reputation: 383

how to use if else condition in angularJs

Hi i am newly to Angular JS, I want Convert AM/PM format in JavaScript for Example ( 25-10-2013 18:30 to 25-10-2013 6:30 PM ) controller file 

for (var i = 0; i < $scope.AvailableSlots.length; i++) 
    $scope.AvailableSlots[i].AppointmentDate  = Date.parse(moment($scope.AvailableSlots[i].F).format('MM-DD-YYYY HH:mm')) ; 
}

<div>
    <button class="btn btn-danger"  ng-click="cancelAppointment(appointment)">Cancel</button>
</div>

here Cancel Button should appear only if the Appointment date is future date. Otherwise, the cancel button should be hidden.

Upvotes: 0

Views: 144

Answers (3)

harishr
harishr

Reputation: 18055

first create a boolean in js for isFuture

for (var i = 0; i < $scope.AvailableSlots.length; i++) 
    $scope.AvailableSlots[i].AppointmentDate  = Date.parse(moment($scope.AvailableSlots[i].F).format('MM-DD-YYYY HH:mm')) ; 
    $scope.AvailableSlots[i].IsFuture  = moment().isBefore($scope.AvailableSlots[i].AppointmentDate) ; 
}

and then in js

<button class="btn btn-danger" ng-show="appointment.IsFuture" ng-click="cancelAppointment(appointment)">Cancel</button>

Upvotes: 0

Christos
Christos

Reputation: 53958

You could do this using the ng-show="isFutureDay" attribute.

<button class="btn btn-danger" 
        ng-show="isFutureDay" 
        ng-click="cancelAppointment(appointment)">Cancel</button>

where isFutureDay would be a boolean variable in the scope, which indicates if the appointment day is a future day or not. If it is a future day, isFutureDay===true, then the button will be visible. Otherwise, it will be invisible.

For further documentation about ng-show, please have a look here.

Upvotes: 1

mutlei
mutlei

Reputation: 133

If you use data binding, you can do it using filters, such as:

{{ AvailableSlots[0].AppointmentDate | date:'MMM dd, yyyy hh:mm a' }}

The [0] is for simplicity's sake.

As for the Cancel button, you can use the "ng-show" attribute, such as:

ng-show="(AppointmentDate - today's date) > 0"

Inside the button, so it's shown only if that condition is true.

Upvotes: 0

Related Questions