make ng-repeat images draggable and get their position

Question

I'd like to make ng-repeat images draggable and get their position but since the id is dynamically created I don't know how to do it.

Here is my HTML code:

<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>

Here is my js side:

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);
        }
    });
}
};

Of course it can't work since there is no element named "postImgId", but then how do I access this image?

I hope someone can help me.

Sorry for my english, it isn't my native language.

Answer 1

I changed my strategy, and it works now:

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});

        }