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

Question

这是我的工作流程-

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

我需要的是从ng-repeat传递item的id，并在modal-popup.

中显示这个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>

主要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}} 的代码：（这里，id 对于 ng-repeat 的项目是递增的）

div#0.ng-binding

所以我哪里错了？是由于任何异步调用吗？或者是由于 ng-binding （即在 ng-binding 函数完成之前返回项目的 id）?

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

Answer 1

你可以将你的 $index 传递给 ng-click="openModal()" ，所以它将是 ng-click="openModal($index)" .

控制器

$scope.openModal = function (id) {
console.log(id); // log the clicked id
}

Answer 2

您不应获取 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>

Answer 3

您可以将选定的 JsonData 对象作为 openModal 函数的参数传递

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

您也可以将选定的对象传递给模态控制器

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

并在 PopUpController 中获取选定的对象

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

      console.log(selected)
}])

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

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

javascript

angularjs

angularjs-ng-repeat

ng-bind