Условные выражения в HTML-атрибуте

Как бы вы изменили атрибут html на основе модели?

Я пытаюсь изменить текст заполнителя ввода на основе длины массива:

<input placeholder="{{todos.length ? 'Insert todo' : 'Insert your first todo'}}" />

Но это не работает...

Пример кода JS Bin.

Ответ 1

Для всех, кто сталкивается с этим (например, я просто делал это через Google), похоже, что Angular недавно добавила поддержку тернарного оператора в выражениях. Я просто использовал его в 1.2.16 для динамического обновления атрибута всплывающей подсказки (заголовка). Кажется, он впервые появился в документации по 1.2.17, хотя они по-прежнему в целом препятствуют его использованию:

От: AngularJS: Руководство разработчика: выражения

Помимо тернарного оператора (a? b: c), вы не можете написать оператор потока управления в выражении. Причиной этого является ядро философии Angular, что логика приложения должна быть в контроллерах, а не в представлениях. Если вам нужен реальный условный, цикл или выкинуть из выражения вида, делегируйте его вместо JavaScript.

Ответ 2

В этом случае тройной оператор не работает, вместо этого

{{cond ? true : false}}

Измените его на

{{ exp && true || false }}

Итак, ваш атрибут placeholder будет выглядеть так (я сократил его для демонстрационных целей)

placeholder="{{todos.length > 0 && 'Insert' || 'Insert first'}}"