Angular ng-if change span text

Question

I have this JSON file that I am taking objects as products from. When displaying the sizes of the products I want to change a span from "sizes:" to "kids:" when the json object has "kids": "1".

<div class="sizes-wrap">
        <span class="size-label"><span>sizes:</span>
        <span class="sizes">{{ item.sizes }}</span>
</div>

this code prints Sizes: and the sizes from the json e.g. "128 cm,140 cm,152 cm,164 cm"

I want when in the json object "kids" has a value of 1 to change the word "sizes" to "kids" in the html.

<div class="sizes-wrap">
        <span class="size-label"><span>kids:</span>
        <span class="sizes">{{ item.sizes }}</span>
</div>

Here is an one of the json objects:

  "kids": "0",
  "name": "Product name",
  "sizes": "Small,Medium,Large,X-Large,XX-Large,3XL",
  "kid_adult": "0",
  "free_porto": "0",
  "price": "649,00",
  "package": "0",
  "delivery": "1-2 dage",
  "price_old": "0,00",
  "id": "133714",
  "women": "0"

This is what I wanted to achieve after all:

<div class="sizes-wrap">
        <span ng-if="item.kids == 0 && item.kid_adult == 0 && item.women == 0" class="size-label"><span>sizes:</span></span>
        <span ng-if="item.kids == 1" class="size-label"><span>kids:</span></span>
        <span ng-if="item.kid_adult == 1" class="size-label"><span>adult kids:</span></span>
        <span ng-if="item.kid_adult == 1" class="size-label"><span>women:</span></span>
        <span class="sizes">{{ item.sizes }}</span>
    </div>

Really don't understand what you want exactly.. – Pankaj Parkar Aug 23 '15 at 20:56 — Pankaj Parkar, Aug 23 '15 at 20:56
What is the question? – Szabolcs Páll Aug 23 '15 at 20:57 — Szabolcs Páll, Aug 23 '15 at 20:57
Is it correct, that your spans are not closed? – Dmitry Lobov Aug 23 '15 at 20:58 — Dmitry Lobov, Aug 23 '15 at 20:58
thanks I did not see that!! – user1780729 Aug 23 '15 at 21:03 — user1780729, Aug 23 '15 at 21:03

score 16 · Answer 1 · answered Jun 12 '17 at 16:05

16

With a javascript expression, in this case using a ternay operator.

<span>
    {{ user.biography ? user.biography : 'Without information' }}
</span>

answered Jun 12 '17 at 16:05

uruapanmexicansong

3,068
1
18
22

keithm · Accepted Answer · 2015-08-23T20:59:50.237

8

This should work for you:

<div class="sizes-wrap">
    <span class="size-label">
        <span ng-if="item.kids == 0">sizes:</span>
        <span ng-if="item.kids == 1">kids:</span> 
    </span>
    <span class="sizes">{{ item.sizes }}</span>
</div>

edited Aug 23 '15 at 20:59

answered Aug 23 '15 at 20:55

keithm

938
6
9

1

This should work, just don't forget the 'size-label' class. Also not sure why you embedded spans. just use sizes:kids: That will make sure his class is at the right level. – lostintranslation Aug 23 '15 at 20:58
Thank you this worked. But i have another question then if i have "kid_adult": "1"; how this would work? Overal the products have 3 categories kids, kids_adult and women. It would be nice to add them too – user1780729 Aug 23 '15 at 21:05
2

@lostintranslation - there was an inner span in the question so I left it in there. This may have been there by mistake but I can't be sure. – keithm Aug 23 '15 at 21:08
1

@user1780729 your kid_adult question is not clear. If you need different output modify the original question with an edit, or ask another question. – lostintranslation Aug 23 '15 at 21:12
1

@user1780729 - not sure why you un-marked this as the answer !? – keithm Aug 23 '15 at 21:25
missclick or something – user1780729 Aug 23 '15 at 22:22
Is not recommended use multiple ng-if to show a simple value that could be shown using a ternary operator. – uruapanmexicansong Feb 27 '19 at 23:56

score 2 · Answer 3 · answered Aug 23 '15 at 21:03

2

 <span ng-if="data.kids === 1">kids:</span>
 <span ng-if="data.kids !== 1">sizes:</span>

Maybe, like this, but better to send word with json and insert it, like this:

<span class="size_word">{{data.size_word}}</span>

answered Aug 23 '15 at 21:03

Dmitry Lobov

313
1
10

score 1 · Answer 4 · answered Mar 10 '21 at 17:01

Instead of using multiple *ngIf you could use an *ngIf; else. Example from Angular Docs v11:

<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

Angular ng-if change span text

4 Answers4

Linked