I need to open modal window with selected data from cell of table. Now the modal is opened with data but data in modal belong to all row. I need to chose data from item selected cell. I have a two arrays. One in other. I can selected item from first array (dataTable) but there is exist another array (item.arrValues) in the there. I can't to get the selected data from a second array. How can I to display the data from selected cell?
Example here 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
};
}
Change <td>
to pass i
to the function (i being the value in the cell in this case):
<td ng-click="vm.openEvents(i);" ng-repeat="i in item.arrValues">{{i.Value}}</td>
Change the modal template to display selected.item.DAY
and 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>