Trivedi Trivedi - 27 days ago 13
AngularJS Question

Getting ID of the first item only on using ng-repeat

So here's my workflow-

I've got an HTML file in which a

div
tag is created on which I've placed
ng-repeat
which iterates and gives me a list of items. On this
div
tag, I've placed an
ng-click
function. On clicking and item in the
div
tag, a modal-popup is opened.

What I need is to pass the id of the item from ng-repeat and show the data of this id in the modal-popup.

Now I've written the code upto here and all things are working fine, but the issue that I'm facing is if I click on any of the items from
ng-repeat
the first item is only returned, and hence data for the id of the first item is only being displayed in the modal-popup.


How could I get the id of the particular item clicked (and not the first item) and pass it to the controller?

Here's my working code -

main HTML:

<div id="main">
<div ng-repeat="data in JsonData" ng-click="openModal()">
<div id="widget">
<div id="{{$index}}">
<div>
<h2 class="font-bold no-margins" id="{{data.itemName}}">
{{data.itemName}}
</h2>
</div>
<div>
// other code
</div>
</div>
</div>
</div>
</div>


main controller.js:

$scope.openModal = function () {
$rootScope.elementid = document.getElementById('main').getElementsByTagName('div')[2];
$rootScope.variableId = $scope.elementid.id; // This gives the value in {{$index}}

$rootScope.elementname = document.getElementById('main').getElementsByTagName('h2')[0];
$rootScope.variablename = $scope.elementname.id; // This gives the value in {{data.itemName}}

$uibModal.open({
templateUrl: 'url/to/modal/popup.html',
controller: 'PopUpController',
scope : $scope,
windowClass: "animated fadeIn",
backdrop:'static'
});
};


On doing inspect element, I found that the elements are getting their correct id.

This is for the {{itenName}} code: (names are coming correct)

h2#CorrectName.ng-binding


and this is for the {{$index}} code: (here, id is incrementing for the items of ng-repeat)

div#0.ng-binding


So where am I wrong here? Is it due to any asynchronous call? Or is it due to ng-binding (i.e id of the item is returned before the ng-binding function completes)?

I'm really stuck here for a couple of days now. Any help would be much appreciated. Thanks.

Answer

You should not get the HTML data, instead you should pass the values to your function

ng-click="openModal(data)"

and from that on you can get the data in your funtion

$scope.openModal = function (data) {

and now you can do with that data whatever you want

console.log(data.itemName)

angular.module('test', []).controller('test', function($scope) {
  // Test data
  $scope.JsonData = [{itemName: "Test"}, {itemName: "OtherTest"}];
  
  $scope.openModal = function(data) {
    // handling data
    console.log(data);
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="test" ng-controller="test">
<div ng-repeat="data in JsonData" ng-click="openModal(data)">               
    <div id="widget">
        <div id="{{$index}}">
            <div>
                <h2 class="font-bold no-margins" id="{{data.itemName}}">
                {{data.itemName}}
                </h2>
            </div>
        </div>
    </div>
</div>
 </div>