HTML attributes and angular variables (controllers/directive)


#1

Is there a way to set HTML attributes, with values of scope variables?
example:

<img src={{imageName}}/>

Is such a thing possible at all?


#2

I hope this is not a troll question.

Yes, it is possible, that’s the point of AngularJS. You can use a scope variable and set it as an HTML attribute value.

Example: http://plnkr.co/edit/lxz1jf?p=preview


#3

Thanks. <img> tag wasn’t the one with which i originally i had this question.
The <input> tag… how do we set the ‘type’ attribute of an tag, with a scope variable?


#4

Simply, just use my example and replace img with input:


#5

It doesn’t seem to work.
I tried:
<input ng-src="{{ipType}}"/> (seems awkward)
, where ipType is defined as:
$scope.ipType = password;

Is it some other attribute such as ngBind?


#6

It is not ng-src (src attribute is used only for img fields).

It should be type attribute, like in my example.

Here’s another example: http://plnkr.co/edit/lxz1jf?p=preview

Just click on the provided button and field will change from color picker to password box.


#7

The link is showing the same example as before. Looks like it’s not updated.


#8

Refresh that example, I can see every new change.

Even better, here’s a forked example; http://plnkr.co/edit/4svVau?p=preview


#9

It’s updated now, and it now works in my code too!
I was using a directive’s scope variable, and was not using the correct naming conventions.
Thanks!