Как открыть угловое модальное окно с выбранными данными из таблицы - PullRequest
Новая
       23

Как открыть угловое модальное окно с выбранными данными из таблицы

0 голосов
/ 24 августа 2018

Мне нужно открыть модальное окно с выбранными данными из ячейки таблицы.Теперь модальное окно открывается данными, но модальные данные принадлежат всей строке.Мне нужно выбрать данные из элемента выбранной ячейки.У меня есть два массива.Один в другой.Я могу выбрать элемент из первого массива (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
	};
}

1 Ответ

0 голосов
/ 24 августа 2018

Измените <td>, чтобы передать 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>

Рабочий ПЛНКР здесь.

...