Question

所以这是我的工作流程 -

我已经创建了一个HTML文件，其中创建了div标记，我放置了ng-repeat标记，它会迭代并提供项目列表。在此div代码中，我已经放置了ng-click功能。点击div标记中的项目后，会打开模态弹出。

我需要的是从ng-repeat传递项目的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>

主控制器.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'
    });
};

在执行inspect元素时，我发现元素正在获得正确的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)

＆＃13;

angular.module('test', []).controller('test', function($scope) {
  // Test data
  $scope.JsonData = [{itemName: "Test"}, {itemName: "OtherTest"}];
  
  $scope.openModal = function(data) {
    // handling data
    console.log(data);
  }
})

＆＃13;

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

＆＃13;

Answer 3

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

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

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

$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中选择obj

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

      console.log(selected)
}])

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

3 个答案: