Angular ng-if更改范围文本

时间:2015-08-23 20:51:57

标签: html css angularjs angular-ng-if

我有这个JSON文件,我将对象作为产品。当显示产品的尺寸时,我想要改变尺寸:"尺寸:"到了孩子们:"当json对象有" kids":" 1"。

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

此代码打印尺寸:和json的尺寸,例如&#34; 128厘米,140厘米,152厘米,164厘米&#34;

我想在json对象&#34; kids&#34;值为1可更改单词&#34; sizes&#34;去孩子&#34;在html。

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

这是一个json对象:

  "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"

这毕竟是我想要实现的目标:

<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>

4 个答案:

答案 0 :(得分:3)

这应该适合你:

<ul>

答案 1 :(得分:3)

使用javascript表达式,在这种情况下使用ternay运算符。

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

答案 2 :(得分:2)

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

也许,像这样,但最好用json发送单词并插入它,如下所示:

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

答案 3 :(得分:0)

代替使用多个 *ngIf,您可以使用 *ngIf; elseAngular 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>