代码之家  ›  专栏  ›  技术社区  ›  alexeyll

如何从表格中选择数据打开角度模式窗口

  •  -1
  • alexeyll  · 技术社区  · 8 年前

    这里的例子 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>

    <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 回复  |  直到 8 年前
        1
  •  0
  •   Protozoid    8 年前

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

    Working PLNKR here.