CODEWITHSUNDEEP
javascripthtmlangularjs
Mark
Mark

Reputation: 1872

Angular ternary operator to navigate user

When a user land on a page, an object in the API contains a bool as:

  "Globals": [
    {
      "key": "HasDebitCard",
      "value": "True"
    }
  ]

So if the "value" is 'true' or 'false', it (the link) will navigate to the correct location. The code for this:

        <div class="toolTile col-md-3">
            <a ng-href="{{ ppt.Globals.value.True ? '#/claimEnter' : '#/clearSwipe' }}">
                <img src="ppt/assets/toolIcons/submiticon.svg" >
                <p>Submit a Claim for Reimbursement</p>
            </a>
        </div>

However, when the user click this link, it always goes to the same place, "clearSwipe" whether or not the "value" is set to 'True' or 'False'. In the DOM, it shows as navigating to the same place for both as:

<a ng-href="#/claimEnter" href="#/claimEnter">

Not sure why is it should render one way or the other. What am I doing wrong here?

Thanks much.

Upvotes: 0

Views: 87

Answers (1)

tcigrand
tcigrand

Reputation: 2397

Right now, ppt.Globals.value.True will always return undefined. When you want to check if ppt.Globals.value is equal to True, use the following syntax ppt.Globals.value == 'True'

<div class="toolTile col-md-3">
    <a ng-href="{{ ppt.Globals[0].value == 'True' ? '#/claimEnter' : '#/clearSwipe' }}">
        <img src="ppt/assets/toolIcons/submiticon.svg" >
        <p>Submit a Claim for Reimbursement</p>
    </a>
</div>

Upvotes: 2

Related Questions