Який найкращий спосіб умовно застосувати атрибути в AngularJS?

Мені потрібно вміти додати, наприклад, "contenteditable" до елементів, спираючись на булеву змінну на область застосування.

Приклад використання:

<h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1>

В результаті цього елемента буде додано contenteditable = true, якщо $scope.editModeвстановлено значення true. Чи є якийсь простий спосіб реалізувати такий ng-клас, як поведінка атрибутів? Я розглядаю можливість написання директиви та обміну, якщо ні.

Редагувати: я можу побачити, що між моєю запропонованою директивою attrs і ng-bind-attrs, можливо, є подібність , але вона була видалена в 1.0.0.rc3 , чому так?

Я використовую наступне для умовного встановлення класу attr, коли ng-class не може бути використаний (наприклад, для стилю SVG):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

Цей же підхід повинен працювати і для інших типів атрибутів.

(Я думаю, що вам потрібно мати останній нестабільний Angular, щоб використовувати ng-attr-, зараз я перебуваю на 1.1.4)

Ви можете префіксувати атрибути до, ng-attrщоб зрівняти кутовий вираз. Коли результат виразів не визначений, це вилучає значення з атрибута.

<a ng-attr-href="{{value || undefined}}">Hello World</a>

Дасть результат (коли значення хибне)

<a ng-attr-href="{{value || undefined}}" href>Hello World</a>

Тому не використовуйте, falseоскільки це призведе до слова "false" як значення.

<a ng-attr-href="{{value || false}}" href="false">Hello World</a>

При використанні цього фокусу в директиві. Атрибути директиви будуть помилковими, якщо вони не мають значення.

Наприклад, сказане було б помилковим.

function post($scope, $el, $attr) {
      var url = $attr['href'] || false;
      alert(url === false);
}

Я працював над цим, важко встановивши атрибут. І контроль застосовності атрибута, використовуючи булеве значення для атрибута.

Ось фрагмент коду:

<div contenteditable="{{ condition ? 'true' : 'false'}}"></div>

Я сподіваюся, що це допомагає.

В останній версії Angular (1.1.5) вони включили умовну директиву під назвою ngIf. Він відрізняється від ngShowта ngHideтим, що елементи не приховані, але взагалі не включені до DOM. Вони дуже корисні для компонентів, які дорого створюються, але не використовуються:

<h1 ng-if="editMode" contenteditable=true>{{content.title}}</h1>

Щоб отримати атрибут для відображення конкретного значення на основі булевої перевірки або повністю пропущений, якщо булева перевірка не вдалася, я використав наступне:

ng-attr-example="{{params.type == 'test' ? 'itWasTest' : undefined }}"

Приклад використання:

<div ng-attr-class="{{params.type == 'test' ? 'itWasTest' : undefined }}">

Виводить <div class="itWasTest">або <div>базується на значенніparams.type

<h1 ng-attr-contenteditable="{{isTrue || undefined }}">{{content.title}}</h1>

створить, коли isTrue = true: <h1 contenteditable="true">{{content.title}}</h1>

а коли isTrue = false: <h1>{{content.title}}</h1>

Щодо прийнятого рішення - рішення, розміщеного Ешлі Девіс, описаний метод все ще друкує атрибут у DOM, незалежно від того, що значення, яке йому було призначено, не визначене.

Наприклад, у налаштуваннях поля введення як з ng-моделлю, так і з атрибутом значення:

<input type="text" name="myInput" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />

Незалежно від того, що стоїть за myValue, атрибут значення все ще надрукується в DOM, таким чином, інтерпретується. Ng-модель тоді переосмислюється.

Трохи неприємно, але з використанням ng-if трюк:

<input type="text" name="myInput" data-ng-if="value" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />
<input type="text" name="myInput" data-ng-if="!value" data-ng-model="myModel" />

Я рекомендую використовувати більш детальну перевірку всередині директив ng-if :)

Також ви можете використовувати такий вираз:

<h1 ng-attr-contenteditable="{{ editMode ? true : false }}"></h1>

Я фактично написав патч, щоб зробити це кілька місяців тому (після того, як хтось запитав про це в #angularjs на freenode).

Він, ймовірно, не буде об’єднаний, але він дуже схожий на ngClass: https://github.com/angular/angular.js/pull/4269

Незалежно від того, зливається він чи ні, існуючий матеріал ng-attr- *, ймовірно, підходить для ваших потреб (як уже згадували інші), хоча це може бути трохи незграбніше, ніж більш функціональний стиль ngClass, який ви пропонуєте.

Для перевірки поля введення можна зробити:

<input ng-model="discount" type="number" ng-attr-max="{{discountType == '%' ? 100 : undefined}}">

Це буде застосовуватися атрибут maxдо 100тільки , якщо discountTypeвизначається як%

Редагувати : Ця відповідь пов’язана з Angular2 +! Вибачте, я пропустив тег!

Оригінальна відповідь:

Що стосується дуже простого випадку, коли ви хочете застосувати (або встановити) атрибут лише якщо було встановлено певне значення введення, це так просто, як

<my-element [conditionalAttr]="optionalValue || false">

Це те саме, що:

<my-element [conditionalAttr]="optionalValue ? optionalValue : false">

(Таким чином, необов'язковий варіант застосовується, якщо в іншому випадку вираз є помилковим, а атрибут не застосовується.)

Приклад: у мене був випадок, коли я дозволяв застосувати колір, але також довільні стилі, де атрибут кольору не працював, як він був уже встановлений (навіть якщо колір @Input () не вказано):

@Component({
  selector: "rb-icon",
  styleUrls: ["icon.component.scss"],
  template: "<span class="ic-{{icon}}" [style.color]="color==color" [ngStyle]="styleObj" ></span>",
})
export class IconComponent {
   @Input() icon: string;
   @Input() color: string;
   @Input() styles: string;

   private styleObj: object;
...
}

Отже, "style.color" був встановлений лише тоді, коли атрибут кольору був там, інакше атрибут кольору у рядку "стилі" може бути використаний.

Звичайно, цього можна було б досягти і за допомогою

[style.color]="color" 

і

@Input color: (string | boolean) = false;

На всякий випадок, якщо вам потрібне рішення для Angular 2, то його просте, використовуйте прив'язку властивостей, як показано нижче, наприклад, ви хочете, щоб введення було прочитано лише умовно, а потім додайте в квадратні дужки аттрубу, а потім - знак та вираз.

<input [readonly]="mode=='VIEW'"> 

Вдалося це зробити:

ng-attr-aria-current="{{::item.isSelected==true ? 'page' : undefined}}"

Приємним є те, що якщо item.isSelected false, то атрибут просто не надається.