只能使用獲得的第一個項目的ID NG-重複

Question

因此，這裏是我的工作流 -

我已經有了我已經放在ng-repeat其迭代，並給了我，其中div標籤創建一個HTML文件項目列表。在此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> 

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

，這對於{{$指數}}代碼：（這裏，ID是遞增ng-repeat的項目）

div#0.ng-binding 

那麼我在哪裏錯了？是否由於任何異步調用？或者是由於ng-binding（即該項的id在ng-binding函數完成之前返回）？

我在這裏呆了好幾天了。任何幫助將非常感激。謝謝。

Answer 1

你不應該得到的HTML數據，而應該值傳遞給你的函數

ng-click="openModal(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 2

你可以將你的$ index傳遞給ng-click =「openModal（）」，所以它會是ng-click =「openModal（$ index）」。

控制器

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

Answer 3

你可以通過選擇JsonData對象作爲openModal功能parametr

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

並獲得選擇的OBJ在PopUpController

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

     console.log(selected) 
}])