Dynamic Attributes with AngularJS

Question

In some cases I need to apply different attributes to a node based on properties in my model.

For example, in one case I need to add a 'required' tag and in another case not. I've been using ng-if with different branches to accomplish this but the cases are getting out of hand quickly.

 <div ng-if="model.required">
    <input class="form-control"
           type="text"
           required 
           ng-model="model" />
 </div>
 <div ng-if="!model.required">

    // as different options arise,
    // i have more forks for each attribute combo

    <input class="form-control"
           type="text"
           ng-model="model" />
 </div>

Is there a better way to dynamic apply attributes to nodes?

Matt Way · Accepted Answer · 2014-01-23 01:37:23Z

13

I have quickly created a directive that allows you specify attributes dynamically.

http://jsfiddle.net/HB7LU/1806/

I'm not sure if it will have the desired effect you are after in this simple form, but it might be a good starting point. You essentially use:

<div dyn-attrs="someModelArray"></div>

And set your model accordingly:

$scope.someModelArray = [
    { attr: 'myattribute', value: '' },
    { attr: 'anotherattribute', value: 'val' }
];

answered Jan 23, 2014 at 1:37

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

amcdnl Over a year ago

Maybe merging this w/ the same approach the ng-css has would complete my case. Thanks!

parliament Over a year ago

Unfortunately, the attributes used in this approach cannot be directives. Well they can, but they won't be compiled by angular.

Agorreca Over a year ago

Note: Here it says: dyn-attrs, and in Fiddle, dyn-attr

Simon Trewhella · Accepted Answer · 2014-08-29 23:01:36Z

6

In this case it would be best to make use of ngRequired:

<input class="form-control" type="text" ng-required="model.required" />

answered Aug 29, 2014 at 23:01

Simon Trewhella

2,5343 gold badges25 silver badges24 bronze badges

Collectives™ on Stack Overflow

Dynamic Attributes with AngularJS

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related