Javascript 仅在使用ng repeat时获取第一项的ID

这是我的工作流程-

我有一个HTML文件，其中创建了一个

div

标记，我在该标记上放置了

ng repeat

，该标记进行迭代，并给我一个项目列表。在这个

div

标签上，我放置了一个

ng click

函数。单击

div

标签中的项目，打开一个模式弹出窗口

我需要的是从ng repeat传递项目的id，并在模式弹出窗口中显示该id的数据

现在我已经在这里写了代码，所有的事情都很好，但是我面临的问题是，如果我点击

ng repeat

中的任何项目，第一个项目只会返回，因此第一个项目的id数据只会显示在模式弹出窗口中。

如何获取所单击的特定项目（而不是第一个项目）的id并将其传递给控制器？

这是我的工作代码-

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

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

在检查元素时，我发现元素得到了正确的id

这是针对{{itenName}}代码的：（名称正确无误）

这是针对{$index}代码的：（这里，对于ng repeat的项，id是递增的）

那么我错在哪里呢？这是由于任何异步调用造成的吗？或者是由于ng绑定造成的（即在ng绑定功能完成之前返回项目id）

---

我真的被困在这里好几天了。任何帮助都将不胜感激。谢谢。

您可以将$index传递给ng click=“openModal（）”，因此它将是ng click=“openModal（$index）”

控制器

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

$scope.openModal=函数（id）{
console.log（id）；//记录单击的id
}

您可以将$index传递给ng click=“openModal（）”，因此它将是ng click=“openModal（$index）”

控制器

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

$scope.openModal=函数（id）{
console.log（id）；//记录单击的id
}

不应获取HTML数据，而应将值传递给函数

ng-click="openModal(data)"

从那以后，你可以在你的函数中得到数据

$scope.openModal = function (data) {

现在你可以随心所欲地处理这些数据

console.log(data.itemName)

angular.module（'test'，[]）.controller（'test'，function（$scope）{
//测试数据
$scope.JsonData=[{itemName:“Test”}，{itemName:“OtherTest”}]；
$scope.openModal=函数（数据）{
//处理数据
控制台日志（数据）；
}
})

{{data.itemName}

不应获取HTML数据，而应将值传递给函数

ng-click="openModal(data)"

从那以后，你可以在你的函数中得到数据

$scope.openModal = function (data) {

现在你可以随心所欲地处理这些数据

console.log(data.itemName)

angular.module（'test'，[]）.controller（'test'，function（$scope）{
//测试数据
$scope.JsonData=[{itemName:“Test”}，{itemName:“OtherTest”}]；
$scope.openModal=函数（数据）{
//处理数据
控制台日志（数据）；
}
})

{{data.itemName}

您可以将选定的

JsonData

对象作为OpenModel函数的参数传递

<div ng-repeat="data in JsonData" ng-click="openModal(data)"> 

并在PopUpController中获取选定的对象

app.contoller('PopUpController',['selected', function(selected){

      console.log(selected)
}])

---

您可以将选定的

JsonData

对象作为OpenModel函数的参数传递

<div ng-repeat="data in JsonData" ng-click="openModal(data)"> 

并在PopUpController中获取选定的对象

app.contoller('PopUpController',['selected', function(selected){

      console.log(selected)
}])

---

啊哈。。谢谢。！这解决了我的问题。这件事我已经纠缠了好几天了。你在正确的时间帮助了我的朋友啊哈。。谢谢。！这解决了我的问题。这件事我已经纠缠了好几天了。你在正确的时间帮助了我，我的朋友。你的答案可能也是正确的，但我尝试了@SpargelPlays answer，它解决了我的问题。不过，也谢谢你的回答。非常感谢。您的答案可能也是正确的，但我尝试了@SpargelPlays答案，它解决了我的问题。不过，也谢谢你的回答。非常感谢。