Kenneth Lynne Kenneth Lynne - 6 months ago 61
AngularJS Question

What is the best way to conditionally apply attributes in Angular?

I need to be able to add for example "contenteditable" to elements, based on a boolean variable on scope.

Example use:

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


Would result in contenteditable=true being added to the element if
$scope.editMode
was set to
true
.
Is there some easy way to implement this ng-class like attribute behavior? I'm considering writing a directive and sharing if not.

Edit:
I can see that there seems to be some similarities between my proposed attrs directive and ng-bind-attrs, but it was removed in 1.0.0.rc3, why so?

Answer

I am using the following to conditionally set the class attr when ng-class can't be used (for example when styling SVG):

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

The same approach should work for other attribute types.

(I think you need to be on latest unstable Angular to use ng-attr-, I'm currently on 1.1.4)