时间戳

首页 > 解决方案 > 更改 DIV 标记内元素的顺序

html - 更改 DIV 标记内元素的顺序

问题描述

我想div在特定条件下动态地更改元素的顺序。

原始代码是

<div class="radio radio-inline radio-primary">
  <input 
    id="allergyYes" 
    type="radio" 
    (click)="toggleAllergy($event)" 
    data-toggle="true" 
    [(ngModel)]="allergy.isAllergic" 
    [value]="1"
    name="allergyYes" 
  />
  <label for="allergyYes">{{selectedLanguage.yes}}</label>
</div>

当变量发生变化时，我希望将 div 内的顺序更改为：

<div class="radio radio-inline radio-primary">
  <label for="allergyYes">{{selectedLanguage.yes}}</label>
  <input 
    id="allergyYes" 
    type="radio" 
    (click)="toggleAllergy($event)" 
    data-toggle="true" 
    [(ngModel)]="allergy.isAllergic" 
    [value]="1"
    name="allergyYes" 
  />
</div>

我怎样才能做到这一点？

标签： htmlcssangular

解决方案

您可以使用两个模板和一个ngif（描述部分中的第三个示例）。

如果表达式的计算结果为 ，这将在 div 中显示内容true，否则将显示ng-templateif 计算结果为的内容false。

<div class="radio radio-inline radio-primary" *ngIf="myVar === 'option-one';else elseBlock">
  <input id="allergyYes" 
    type="radio" 
    (click)="toggleAllergy($event)" 
    data-toggle="true" 
    [(ngModel)]="allergy.isAllergic" 
    [value]="1" 
    name="allergyYes" />
  <label for="allergyYes">{{selectedLanguage.yes}}</label>
</div>

<ng-template #elseBlock>
  <label for="allergyYes">{{selectedLanguage.yes}}</label>
  <input id="allergyYes" 
    type="radio" 
    (click)="toggleAllergy($event)" 
    data-toggle="true" 
    [(ngModel)]="allergy.isAllergic" 
    [value]="1" 
    name="allergyYes" />
</ng-template>


@Component({
  // Component settings
})
export class TestComponent {
  public myVar = 'option-two'
}

推荐阅读