Angular ng-if expression on html view

Question

I'm looking to display a date value in my html (with a pipe expression), but only if that date exists. If that field comes back as null, then I'm replacing it with N/A in my controller js code.

I think this should be simple, but I'm having a some trouble getting it to work.

This currently displays the date, or just blank if date is null.

<div>
   <label> 
   {{ctrl.data.myDate | stringToDate:'yyyy-MM-dd'}}
   </label>
</div>

I'm trying :

<div>
       <label> 
       <span ng-if="ctrl.data.myDate!='N/A'">
          {{ctrl.data.myDate | stringToDate:'yyyy-MM-dd'}}
       </span>
       </label>
       
       <label> 
       <span ng-if="ctrl.data.myDate=='N/A'">
          N/A
       </span>
       </label>
       
</div>

However, it's displaying null when the date is N/A.

This works, but without the pipe expression - however, I NEED to pipe the date string properly:

 <span>{{vm.data.myDate==='N/A' ? "N/A" : vm.data.myDate }}</span>

UPDATE

I'm trying a different approach where I can use the Angular $filter provider. So if myDate is NOT NULL, I can format the date in my js controller :

  vm.data.myDate = $filter('date')(new Date(data[0].closeDate), 'yyyy-MM-dd');

Pipe is only 1 bar (|). Two bars (||) is the OR operator — mhodges
– mhodges, Commented Mar 16, 2017 at 16:23
Is ctrl.data.myDate equal to the string "N/A" before it runs through the date filter? — mhodges
– mhodges, Commented Mar 16, 2017 at 16:32
@mhodges - yes it is equal to N/A prior to the date filter. In my controller js code, I check for null in .myDate. If null then I replace with N/A. Please see my updated post with ternary expression. — bob.mazzo
– bob.mazzo, Commented Mar 16, 2017 at 16:35
I'm not seeing that behavior. Can you create a demo that replicates the problem you are experiencing? jsbin.com/junamahosu/1/edit?html,js,output — mhodges
– mhodges, Commented Mar 16, 2017 at 16:37

RIYAJ KHAN · Accepted Answer · 2017-03-16 17:36:32Z

1

 <span>
{{ (vm.data.myDate==='N/A' || !vm.data.myDate) ? "N/A" : (vm.data.myDate | date:'yyyy-MM-dd') }}
</span>

edited Mar 16, 2017 at 17:36

answered Mar 16, 2017 at 17:05

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

bob.mazzo Over a year ago

That displays nothing at all. My date is just blank now. As I mention in my OP, this works but only if I remove the pipe (which is not what I want to do) - <span>{{vm.data.myDate==='N/A' ? "N/A" : vm.data.myDate }}</span>

RIYAJ KHAN Over a year ago

@bob.mazzo I didn't removed pipe |

bob.mazzo Over a year ago

yes, thank you. I'm just saying that your answer just displays a blank value. I have also tried the same thing, embedding the date and pipe within parenths (but it doesn't work).

bob.mazzo Over a year ago

I think filtering the date in javascript is the best approach, and remove the pipe in the html. I just need to figure that out in js.

RIYAJ KHAN Over a year ago

did u checked vm.data.myDate what it displying?

Petr Averyanov · Accepted Answer · 2017-03-16 17:56:18Z

1

Having view value and model value in one variable is wrong approach. You should follow one of:

Store only model value, so you have date in js that can be null, and in html:

{{ctrl.data.myDate | date:'yyyy-MM-dd' || 'N/A'}}

Or you store also view value, then you should parse it in controller:

     ctrl.data.myDateText = $filter('date')(ctrl.data.myDate, 'yyyy-MM-dd'); || 'N/A'
in html: {{ctrl.data.myDateText}}

answered Mar 16, 2017 at 17:56

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

1 Comment

bob.mazzo Over a year ago

@Peter - your second approach was also my second approach (see my UPDATE note in my OP). Thank you.

Collectives™ on Stack Overflow

Angular ng-if expression on html view

2 Answers 2

5 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Related