if else statement in AngularJS templates

Question

I want to do a condition in an AngularJS template  I fetch a video list from the Youtube API  Some of the videos are in 16 9 ratio and some are in 4 3 ratio   I want to make a condition like this   if video yt aspectRatio equals widescreen then      element s attr height  270px  else     element s attr height  360px    I m iterating the videos using ng-repeat  Have no idea what should I do for this condition    Add a function in the scope   Do it in template

User · Answer

In the latest version of Angular  as of 1 1 5   they have included a conditional directive called ngIf   It is different from ngShow and ngHide in that the elements aren t hidden  but not included in the DOM at all   They are very useful for components which are costly to create but aren t used    lt div ng-if  video    video large  gt       lt  -- code to render a large video block-- gt   lt  div gt   lt div ng-if  video    video large  gt       lt  -- code to render the regular video block -- gt   lt  div gt

User · Answer

A possibility for Angular  I had to include an if - statement in the html part  I had to check if all variables of an URL that I produce are defined  I did it the following way and it seems to be a flexible approach  I hope it will be helpful for somebody   The html part in the template         lt div   ngFor  let p of poemsInGrid  let i   index   gt           lt a  routerLink   produceFassungsLink p 0  p 3    routerLinkActive  active  gt       lt  div gt    And the typescript part     produceFassungsLink titel  string  iri  string          if titel     undefined  amp  amp  iri     undefined             return titel split      0     ---    iri split  raeber    1           else            return  Linkinformation has not arrived yet                 Thanks and best regards   Jan

User · Answer

I agree that a ternary is extremely clean    Seems that it is very situational though as somethings I need to display div or p or table   so with a table I don t prefer a ternary for obvious reasons   Making a call to a function is typically ideal or in my case I did this    lt div ng-controller  TopNavCtrl  gt           lt div ng-if  info host     servername   gt               lt table class  table  gt                   lt tr ng-repeat   group  status  in user groups  gt                       lt th style  width  250px  gt    group    lt  th gt                       lt td gt  lt input type  checkbox  ng-model  user groups group     gt  lt  td gt                   lt  tr gt               lt  table gt           lt  div gt          lt div ng-if  info host     otherservername   gt               lt table class  table  gt                   lt tr ng-repeat   group  status  in user groups  gt                       lt th style  width  250px  gt    group    lt  th gt                       lt td gt  lt input type  checkbox  ng-model  user groups group     gt  lt  td gt                   lt  tr gt               lt  table gt           lt  div gt   lt  div gt

User · Answer

Angular itself doesn t provide if else functionality  but you can get it by including this module   https   github com zachsnow ng-elif  In its own words  it s just  a simple collection of control flow directives  ng-if  ng-else-if  and ng-else    It s easy and intuitive to use    Example    lt div ng-if  someCondition  gt           lt  div gt   lt div ng-else-if  someOtherCondition  gt           lt  div gt   lt div ng-else gt           lt  div gt

User · Answer

You could use your video yt aspectRatio property directly by passing it through a filter  and binding the result to the height attribute in your template   Your filter would look something like   app filter  videoHeight   function        return function  input        if  input      widescreen           return  270px         else         return  360px                    And the template would be    lt video height   video yt aspectRatio   videoHeight   gt  lt  video gt

User · Answer

lt div ng-if  modeldate      gt  lt span ng-message  required  class  change  gt Date is required lt  span gt   lt  div gt    you can use the ng-if directive as above

User · Answer

In this case you want to  calculate  a pixel value depending of an object property   I would define a function in the controller that calculates the pixel values   In the controller     scope GetHeight   function aspect       if bla bla bla  return 270     return 360      Then in your template you just write    element height     GetHeight aspect    px

User · Answer

Angularjs  versions below 1 1 5  does not provide the if else functionality   Following are a few options to consider for what you want to achieve    Jump to the update below   5  if you are using version 1 1 5 or greater   1  Ternary operator   As suggested by  Kirk in the comments  the cleanest way of doing this would be to use a ternary operator as follows    lt span gt   isLarge    video large     video small    lt  span gt    2  ng-switch directive   can be used something like the following    lt div ng-switch on  video  gt       lt div ng-switch-when  video large  gt           lt  -- code to render a large video block-- gt       lt  div gt       lt div ng-switch-default gt           lt  -- code to render the regular video block -- gt       lt  div gt   lt  div gt    3  ng-hide   ng-show directives  Alternatively  you might also use ng-show ng-hide but using this will actually render both a large video and a small video element and then hide the one that meets the ng-hide condition and shows the one that meets ng-show condition  So on each page you ll actually be rendering two different elements   4  Another option to consider is ng-class directive   This can be used as follows    lt div ng-class   large-video  video large   gt       lt  -- video block goes here -- gt   lt  div gt    The above basically will add a large-video css class to the div element if video large is truthy   UPDATE  Angular 1 1 5 introduced the ngIf directive  5  ng-if directive   In the versions above 1 1 5 you can use the ng-if directive  This would remove the element if the expression provided returns false and re-inserts the element in the DOM if the expression returns true  Can be used as follows    lt div ng-if  video    video large  gt       lt  -- code to render a large video block-- gt   lt  div gt   lt div ng-if  video    video large  gt       lt  -- code to render the regular video block -- gt   lt  div gt

User · Answer

ng If else statement   ng-if  receiptData cart    undefined   close

User · Answer

Ternary is the most clear way of doing this    lt div gt   ConditionVar    varIsTrue     varIsFalse    lt  div gt

[if-statement] if else statement in AngularJS templates

Examples related to if-statement

Examples related to angularjs