Каков наилучший способ условного применения атрибутов в AngularJS?

Вы можете префиксные атрибуты с ng-attr для eval выражения Angular. Когда результат выражений undefined, это удаляет значение из атрибута.

<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>

Чтобы получить атрибут для отображения определенного значения на основе логической проверки или полностью исключить, если ошибка boolean не удалась, я использовал следующее:

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>

Я на самом деле написал патч, чтобы сделать это несколько месяцев назад (после того, как кто-то спросил об этом в #angularjs на freenode).

Вероятно, он не будет объединен, но он очень похож на ngClass: https://github.com/angular/angular.js/pull/4269

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

Также вы можете использовать выражение, подобное этому:

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

В отношении принятого решения, опубликованного Эшли Дэвис, описанный метод все еще печатает атрибут в DOM, независимо от того, что назначенное ему значение undefined.

Например, при настройке поля ввода как с ng-моделью, так и с атрибутом value:

<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:)

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

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

Для проверки поля ввода вы можете:

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

Это применит атрибут max к 100, только если discountType определяется как %