How to use ng-repeat with image map area tag?

Question

I\'m trying to create clickable car profile using AngularJS, once I\'ve moved area tag attributes to auto_parts json and bind them with appropriate attributes in ng-repeat t

Answer 1

ngRepeat part has a problem, it should be:

<area ng-repeat="part in auto_parts" shape="{{part.shape}}" coords="{{part.coords}}" ng-click="partClicked(part.type)" title="{{part.type}}" />

Note, that it's shape="{{part.shape}}" with curly braces. Otherwise part.shape is interpreted as literally a string and not interpolated. Same with coords and title attributes.

On the other hand, you don't need interpolation tags in ngClick, as it accepts an expression Angular will understand: ng-click="partClicked(part.type)".

Demo: http://plnkr.co/edit/5bfNEQxqPfzZxuBJOSWm?p=preview