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?

score 13 · Accepted Answer · answered Jan 23 '14 at 01:37

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 '14 at 01:37

Matt Way

32,319
10
79
85

Maybe merging this w/ the same approach the ng-css has would complete my case. Thanks! – amcdnl Jan 23 '14 at 15:37
4

Unfortunately, the attributes used in this approach cannot be directives. Well they can, but they won't be compiled by angular. – parliament Apr 13 '16 at 12:34
1

Note: Here it says: `dyn-attrs`, and in Fiddle, `dyn-attr` – Agorreca Nov 02 '16 at 14:06

score 6 · Answer 2 · answered Aug 29 '14 at 23:01

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 '14 at 23:01

Simon Trewhella

2,124
3
23
23

Dynamic Attributes with AngularJS

2 Answers2

Linked