Как организовать другой HTML (<p>, <h>), используя if else в AngularJS (ngIf)

Question

Я хочу отредактировать код HTML и CSS, чтобы расположить его по-разному на странице, в зависимости от того, выполняется ли условие с использованием AngularJS (команды ng)

У меня thisYear = true или false

ЕслиthisYear - true. Я хочу, чтобы метки и входные HTML-теги со страницы были расположены определенным образом с использованием inLine css, если год является ложным, я хочу расположить его по-другому.

Как настроить оператор if / else в AngularJS (ngIf) и редактировать html и CSS inLine?

Answer 1

Вам нужно добавить что-то вроде этого на ваш взгляд:

<div ng-if="thisYear">
    <!-- Displays stuff when thisYear is true -->
</div>
<div ng-if="!thisYear">
    <!-- Displays stuff when thisYear is false -->
</div>

Кроме того, добавьте классы CSS к определенному div для стилизации.

Answer 2

Похоже, есть несколько вещей, о которых вы можете просить.Я думаю, что вы могли бы извлечь выгоду из использования директив ng-style и ng-class, а также директивы ng-if.

Использование ng-if позволит вам загружать div в DOM, основываясь на том, стоит лилогическое значение - true или false.Благодаря этому вы можете легко расположить ваши метки в любом удобном для вас положении.

<div ng-if="inputTrue">
    <!-- your input/labels go here and will be loaded into the DOM -->
</div>
 <div ng-if="!inputTrue">
    <!-- this input will not be loaded into the DOM -->
</div>

В дополнение к этому вы также можете воспользоваться преимуществами директив ng-class и ng-style.Использование ng-class позволит вам добавить класс в div на основе условия, которое оценивается как true или false.То же самое относится и к директиве в стиле ng.

Она будет следовать чему-то вроде ng-class = "{'className': inputTrue}".