Каков наилучший способ условного применения атрибутов в 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-класс (например, при стилизации 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потому что это даст слово «ложь» в качестве значения.

<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-моделью, так и с атрибутом value:

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

Независимо от того, что стоит за myValue, атрибут value по- прежнему печатается в 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">

(Таким образом, optionValue применяется, если задано, иначе выражение ложно, а атрибут не применяется.)

Пример: у меня был случай, когда я позволил применить цвет, но также и произвольные стили, где атрибут цвета не работал, поскольку он уже был установлен (даже если цвет @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» был установлен только тогда, когда там присутствовал атрибут color, иначе можно было бы использовать атрибут color в строке «styles».

Конечно, это также может быть достигнуто с

[style.color]="color" 

и

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

На всякий случай, если вам нужно решение для Angular 2, тогда его просто, используйте привязку свойства, как показано ниже, например, вы хотите сделать входные данные только для чтения условно, а затем добавьте в квадратных скобках атрибут attrbute, за которым следует знак = и выражение.

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

Был в состоянии заставить это работать:

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

Здесь хорошо то, что если item.isSelected равно false, атрибут просто не отображается.