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?

Answer 1

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' }
];

Answer 2

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

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