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

angularjs angularjs-directive
Kenneth Lynne picture Kenneth Lynne · Mar 29, 2013 · Viewed 280.1k times · Source

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

Ashley Davis picture Ashley Davis · May 21, 2013

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)

Related questions

How to set focus on input field?

What is the 'Angular way' to set focus on input field in AngularJS? More specific requirements: When a Modal is opened, set focus on a predefined <input> inside this Modal. Everytime <input> becomes visible (e.g. …

Read More
What is the difference between '@' and '=' in directive scope in AngularJS?

I've read the AngularJS documentation on the topic carefully, and then fiddled around with a directive. Here's the fiddle. And here are some relevant snippets: From the HTML: <pane bi-title="title" title="{{title}}">{{text}}</pane> From …

Read More
AngularJS ng-style with a conditional expression

I am handling my issue like this: ng-style="{ width: getTheValue() }" But to avoid having this function on the controller side, I would much prefer to do something like this: ng-style="{ width: myObject.value == 'ok' ? '100%' : '0%' }" How can …

Read More