ng-repeatイメージをドラッグ可能にしてその位置を取得する

Question

ng-repeatイメージをドラッグ可能にして位置を取得したいのですが、IDが動的に作成されているため、これを行う方法がわかりません。ここで

は私のHTMLコードです：ここで

<table ng-table="tableParams"> 
    <tr ng-repeat="workstations in workStation" index="{{workstations.identifier}}" style="height: 35px;"> 
     <td data-title="'Id'" > 
      {{workstations.identifier}} 
     </td> 
     <td data-title="'name'"> 
      {{workstations.name}} 
     </td> 

     <td data-title="'X'" > 
      {{workstations.localisationX}} 
     </td> 
     <td data-title="'Y'" > 
      {{workstations.localisationY}} 
     </td> 

     <td data-title="'WS'"> 
      <div class="dragImg"> 
       <img src="pages/resources/img/téléchargement.jpg" ng-init="makeDraggable()" id="postImg{{workstations.identifier}}" style="height: 32px; width: auto;position: absolute" > 
      </div> 
     </td> 
    </tr> 
</table> 
<div ng-show="visible1" style="display: block;left: 20px;"> 

    id:<div id="currentWS"></div></br></br> 

    name:<input ng-model="nameW1" ></br> 
    x:<div id="posX" ng-model="locX" ></div></br> 
    y:<div id="posY" ng-model="locY" ></div></br> 

</div> 
</div > 
<div id="containerMap"> 
    <div id="dropHere"> 
     <img id="map" src="pages/resources/img/skyrim-map-by-mottis86-lg.jpg" style="height: auto; width: 100%"> 
    </div> 
</div> 

</div> 

は私のjs側である：もちろん

for (var i = 0; i < $scope.workStation.length; i++) { 

    var postImgId = "postImg" + $scope.workStation[i].identifier; 

    $("#postImgId").draggable({ 
     containment: "#map", 
     scroll: false, 
     drag: function (event) { 
      locY = $(this).position().top; 
      locX = $(this).position().left; 
      $('#posX').text(locX); 

      $('#posY').text(locY); 
     } 
    }); 
} 
}; 

それはどのようにし、 "postImgId" という名前の要素がないので、動作しますが、できませんこの画像にアクセスしますか？

誰かが私を助けてくれることを願っています。

私の英語のために申し訳ありません、私の母国語ではありません。

Answer 1

私は自分の戦略を変更し、それが動作するようになりました：

HTML：

<table ng-table="tableParams"> 
    <tr ng-repeat="workstations in workStation" index="{{workstations.identifier}}" style="height: 35px;"> 
     <td data-title="'Id'" > 
      {{workstations.identifier}} 
     </td> 
     <td data-title="'name'"> 
      {{workstations.name}} 
     </td> 

     <td data-title="'X'" > 
      {{workstations.localisationX}} 
     </td> 
     <td data-title="'Y'" > 
      {{workstations.localisationY}} 
     </td> 

     <td data-title="'WS'"> 
      <div class="dragImg"> 
       <div class="dragImg" style="position: absolute"> 
       <img src="pages/resources/img/téléchargement.jpg" ng-init="makeDraggable()" ng-click="whichId(workstations.identifier)" lass="img-drag" id="postImg{{workstations.identifier}}" style="height: 32px; width: auto;" > 
      </div> 
     </td> 
    </tr> 
</table> 
<div ng-show="visible1" style="display: block;left: 20px;"> 

    id:<div id="currentWS"></div></br></br> 

    name:<input ng-model="nameW1" ></br> 
    x:<div id="posX" ng-model="locX" ></div></br> 
    y:<div id="posY" ng-model="locY" ></div></br> 

</div> 
<button ng-click="change()">Modify x,y </button> 

<div id="containerMap"> 
    <div id="dropHere"> 
     <img id="map" src="pages/resources/img/skyrim-map-by-mottis86-lg.jpg" style="height: auto; width: 100%"> 
    </div> 
</div> 

</div> 

の.js

$scope.makeDraggable=function() { 





    $(".dragImg").draggable({ 
     containment: "#map", 
     scroll: false, 
     drag: function (event) { 



      locY = $(this).position().top; 
      locX = $(this).position().left; 


      console.info(); 

      $('#posX').text(locX); 

      $('#posY').text(locY); 

     } 
    });  
     }; 

$scope.whichId=function (id) { 
      currentWorkStation=id; 
      console.info(currentWorkStation); 
     } 

$scope.change=function() { 

      console.info(currentWorkStation,locX,locY); 

      WorkStation.updateXY({identifier: currentWorkStation,localisationY: locY ,localisationX: locX}); 

     } 

を