CODEWITHSUNDEEP
angularjsangularjs-directive
user1361529
user1361529

Reputation: 2697

conditional directive attribute without a value using ng-attr

I am trying to achieve the following:

if $scope.loginData.use24hr is true, I want to invoke

<div class="timeline_text" ion-datetime-picker am-pm ng-model="datetimeValueTo.value" ng-change="dateChanged()">

if $scope.loginData.use24hr is false, I want to invoke 

<div class="timeline_text" ion-datetime-picker  ng-model="datetimeValueTo.value" ng-change="dateChanged()">

In other words, "am-pm" is the attribute that needs to conditionally go away.

ion-datetime-picker is a 3rd party directive.

To achieve this I am doing:

<div class="timeline_text" ion-datetime-picker ng-attr-am-pm="{{!loginData.use24hr|| undefined}}"  ng-change="dateChanged()">

However, this always puts the am-pm attribute irrespective of the value of use24hr. Can anyone tell me what I am doing wrong here? Thanks

Updates based on answers

Edited to include response to JC's answer:

<ion-item>
   <div ion-datetime-picker title="From" ng-attr-am-pm="!!loginData.use24hr" ng-model="datetimeValueFrom.value">
    <b>VALUE:{{!loginData.use24hr}} From: </b>{{datetimeValueFrom.value | date: timeFormat}}
    </div>
</ion-item>

I've coerced boolean just to make sure but as you see irrespective of the value, the AM-PM directive always shows up

enter image description here enter image description here

Upvotes: 0

Views: 614

Answers (1)

JC Ford
JC Ford

Reputation: 7066

The attribute can take a value. To turn it off, use am-pm={{!loginData.use24hr}}

Note: Looks like it needs to be boolean false not just falsey. Any value other than boolean false will enable the am-pm behavior.

If you need to coerce your value to boolean, try this: am-pm={{!!loginData.use24hr}}

https://github.com/katemihalikova/ion-datetime-picker/blob/master/src/picker.js#L165

Upvotes: 1

Related Questions