如何将 ng-repeat 与图像映射区域标签一起使用? [英] How to use ng-repeat with image map area tag?

问题描述

我正在尝试使用 AngularJS 创建可点击的汽车配置文件，一旦我将区域标签属性移动到 auto_parts json 并将它们与 ng-repeat 中的适当属性绑定，那么它就不起作用了.如何解决?

请在整页预览中测试元素.

var app = angular.module('app', []);app.controller('imgMapCtrl', function($scope, $http) {$scope.auto_parts = [{"形状": "圆形","type": "kolo_przod",坐标":193,342,68"}, {"形状": "圆形","type": "kolo_tyl",坐标":743,341,68"}, {形状":聚"，"type": "okno",坐标":380,220,494,213,512,149,452,157,421,165,369,192,384,199"}, {形状":聚"，"type": "okno",坐标":536,211,692,202,700,173,664,162,599,152,544,149"}, {形状":聚"，"type": "drzwi","坐标": "301,355,510,354,504,334,510,236,516,213,528,144,462,149,419,162,361,190,300,231,293,253129"}, {形状":聚"，"type": "drzwi","坐标": "510,352,632,349,702,252,712,211,708,202,716,176,657,156,586,145,528,145,516,213,510,233350"}]$scope.partClicked = 函数(参数){警报(参数 + '点击')；}});

<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"/><地图名称="自动" id="自动"><area ng-repeat="part in auto_parts" shape="part.shape" coords="part.coords" ng-click="partClicked('{{part.type}}')" title="part.type"/></地图>

这仅适用于 HTML 片段:

解决方案

ngRepeat部分有问题，应该是:

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

注意，它是带有花括号的 shape="{{part.shape}}".否则 part.shape 被解释为字面上的字符串而不是内插.与 coords 和 title 属性相同.

另一方面，ngClick 中不需要插值标签，因为它接受一个 Angular 会理解的表达式:ng-click="partClicked(part.type)".

演示: http://plnkr.co/edit/5bfNEQxqPfzZxuBJOSWm?p=预览

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 then it isn't working. How to fix it?

Please test elements on full page preview.

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>

This is working only 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>

解决方案

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

这篇关于如何将 ng-repeat 与图像映射区域标签一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！