Geek Answers Handbook

Angular ng - if change range text

I have this JSON file from which I take objects as products. When displaying product sizes, I want to change the range from "sizes:" to "kids:" when the json object has "children": "1".

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

this code prints sizes: and sizes from json, for example. "128 cm, 140 cm, 152 cm, 164 cm"

I want the children in the json object to have a value of 1 to change the word "dimensions" to "children" in html.

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

Here is 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 in the end:

 <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>
+5
source share
3 answers

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>
+3
source 
  <span ng-if="data.kids === 1">kids:</span> <span ng-if="data.kids !== 1">sizes:</span>

It may be like this, but it’s better to send the word using json and paste it, for example:

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

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

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

More articles:


All Articles