javascript - 仅使用 ng-repeat 获取第一项的 ID

Question

这是我的工作流程-

我有一个 HTML 文件，其中创建了一个 div 标记，在该标记上放置了 ng-repeat，它会迭代并为我提供一个项目列表。在此 div 标记上，我放置了一个 ng-click 函数。单击 div 标记中的项目后，将打开一个 modal-popup。

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

现在我已经编写了代码，一切工作正常，但我面临的问题是如果我点击中的任何项目ng-repeat 仅返回第一项，因此第一项的 id 数据仅显示在模态弹出窗口中。

如何获取点击的特定项目的 ID(而不是第一个项目)并将其传递给 Controller ​​？

这是我的工作代码 -

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

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

在检查元素时，我发现元素获得了正确的 ID。

这是 {{itenName}} 代码:(名称正确)

h2#CorrectName.ng-binding

这是 {{$index}} 代码:(这里， ng-repeat 的项目的 id 递增)

div#0.ng-binding

那么我哪里错了？是由于异步调用造成的吗？或者是由于 ng-binding (即在 ng-binding 函数完成之前返回了项目的 id)？

我已经被困在这里好几天了。任何帮助将非常感激。谢谢。

Answer 1

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

ng-click="openModal(data)"

从此您可以在函数中获取数据

$scope.openModal = function (data) {

现在您可以随心所欲地使用这些数据

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>