如何使用来自 table 的选定数据打开 Angular 模态 window

Question

我需要使用 table 单元格中的选定数据打开模态 window。现在模态是用数据打开的，但模态中的数据属于所有行。我需要从项目选择的单元格中选择数据。我有两个数组。一个在另一个。我可以从第一个数组 (dataTable) 中选择项目，但那里存在另一个数组 (item.arrValues)。我无法从第二个数组中获取选定的数据。如何显示所选单元格中的数据？

此处示例Plnkr

HTML

<table>
 <tbody>
  <tr>
   <td></td>
   <td ng-repeat="i in  vm.dataTable[0].arrValues">{{i.DAY}}</td>
  </tr>
  <tr ng-repeat="item in vm.dataTable">
   <td>{{item.time}}</td>
   <td ng-click="vm.openEvents(item);" ng-repeat="i in item.arrValues">{{i.Value}}</td>
  </tr>           
 </tbody>
</table>

modalContent.html

<div>
  
  <div class="modal-body" style="overflow: hidden;">
     
    <div ng-bind="selected.item.Country"></div>
  
    <!--<div ng-bind="selected.item.arrValues[0].Value"></div>-->
   
   <div ng-repeat="i in selected.item.arrValues">{{i.Value}}</div>
  
  </div>

</div>

JS

vm.openEvents = function(item){
 var modalInstance = $modal.open({
  scope: $scope,//
  templateUrl: "modalContent.html",
  controller: ModalInstanceCtrl,
  resolve: {
   item: function() {
    return item;
   },
    
  dataTable: function ($timeout) {
   return vm.dataTable
  }
    
 }
});
 }
  
var ModalInstanceCtrl = function ($scope, dataTable, item) {
 var vm = this;
  
 vm.dataTable = dataTable;
        
 $scope.selected = {
  item: item
 };
}

Answer 1

更改 <td> 以将 i 传递给函数（在这种情况下，i 是单元格中的值）：

<td ng-click="vm.openEvents(i);" ng-repeat="i in item.arrValues">{{i.Value}}</td>

更改模态模板以显示 selected.item.DAY 和 selected.item.Value。

<div>
    <div class="modal-body" style="overflow: hidden;">
        <div ng-bind="selected.item.DAY"></div>
        <div ng-bind="selected.item.Value"></div>
    </div>
</div>

Working PLNKR here.

如何使用来自 table 的选定数据打开 Angular 模态 window

How to open Angular modal window with selected data from table

javascript

angularjs

ui.bootstrap