Wie verwende ich ng-repeat mit dem Image Map Area Tag?
Ich versuche, mit AngularJS ein anklickbares Auto-Profil zu erstellen. Sobald ich die Attribute des Bereichs-Tags in auto_parts json verschoben habe und sie mit den entsprechenden Attributen in ng-repeat verbinde, funktioniert es nicht mehr. Wie man es repariert
Bitte testen Sie die Elemente in der vollständigen Seitenvorschau.
var app = angular.module('app', []);
app.controller('imgMapCtrl', function($scope, $http) {
$scope.auto_parts = [{
"shape": "circle",
"type": "kolo_przod",
"coords": "193,342,68"
}, {
"shape": "circle",
"type": "kolo_tyl",
"coords": "743,341,68"
}, {
"shape": "poly",
"type": "okno",
"coords": "380,220,494,213,512,149,452,157,421,165,369,192,384,199"
}, {
"shape": "poly",
"type": "okno",
"coords": "536,211,692,202,700,173,664,162,599,152,544,149"
}, {
"shape": "poly",
"type": "drzwi",
"coords": "301,355,510,354,504,334,510,236,516,213,528,144,462,149,419,162,361,190,300,231,293,253,292,312"
}, {
"shape": "poly",
"type": "drzwi",
"coords": "510,352,632,349,702,252,712,211,708,202,716,176,657,156,586,145,528,145,516,213,510,235,504,333"
}]
$scope.partClicked = function(arg) {
alert(arg + ' clicked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="imgMapCtrl">
<img class="rwdimgmap" src="http://www.mazda.pl/assets/master/cars/all-new-mazda6-sedan/general/12/m6-sedan-red-side.png" alt="auto" width="960" height="540" border="0" usemap="#auto" />
<map name="auto" id="auto">
<area ng-repeat="part in auto_parts" shape="part.shape" coords="part.coords" ng-click="partClicked('{{part.type}}')" title="part.type" />
</map>
</div>
</div>
Dies funktioniert nur mit HTML-Snippet:
<map name="auto" id="auto">
<area shape="circle" coords="193,342,68" ng-click="partClicked('kolo_przod')" />
<area shape="circle" coords="743,341,68" ng-click="partClicked('kolo_tyl')" />
<area shape="poly" coords="380,220,494,213,512,149,452,157,421,165,369,192,384,199" ng-click="partClicked('okno_przod')" />
<area shape="poly" coords="536,211,692,202,700,173,664,162,599,152,544,149" ng-click="partClicked('okno_tyl')" />
<area shape="poly" coords="301,355,510,354,504,334,510,236,516,213,528,144,462,149,419,162,361,190,300,231,293,253,292,312" ng-click="partClicked('drzwi_przod')" />
<area shape="poly" coords="510,352,632,349,702,252,712,211,708,202,716,176,657,156,586,145,528,145,516,213,510,235,504,333" ng-click="partClicked('drzwi_tyl')" />
</map>