【问题标题】:bootstrap-table not rendering upon updating model in Angular在 Angular 中更新模型时,引导表未呈现
【发布时间】:2015-07-22 00:16:08
【问题描述】:

您好,我无法使用引导表和角度来呈现表格。这是我的代码,我想我需要在 angular ajax 调用中调用 bootstrap-table init 方法。有人可以指导我如何做到这一点..?

angular
		.module('reports')
		.controller(
				'ReportCtrl',
				[
						'$scope',
						'$http',
						'ngProgress',
						function($scope, $http, ngProgress) {
							var vm = this;
							vm.mdp = {};
							vm.mdp.data = [];
							vm.mdp.columns = [];
							
							$scope.submit = function() {
								
								var report = $scope.tab;
                               $http.post('/reports/cmd/getData', {
									report : report,
									date : createdAfter
								}).success(function(data) {
                                 vm.mdp.data = data;
										$.each(data[0], function(key, value){
											vm.mdp.columns.push(key);
										});
                                 }).error(function(error) {
									alert(error);
									
								});
								

							};

						} ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="mdp" class="panel" ng-controller="ReportCtrl as report" ng-show="panel.isSelected('mdp')">
 <table data-toggle="table" data-show-columns="true" data-search="true" data-show-export="true" data-pagination="true" data-height="299">
	    <thead>
	    <tr>
	    
	    <th ng-repeat="c in report.mdp.columns" data-field= {{c}} >{{ c }}</th>
	    
	       
	    </tr>
	    </thead>
	    <tr ng-repeat="r in report.mdp.data">
	    
		    <td ng-repeat="c in report.mdp.columns">{{ r[c] }}</td>
		</tr>
	    
		</table>
</div>

【问题讨论】:

    标签: angularjs bootstrap-table


    【解决方案1】:

    在这里解决了将 Bootstrap Table 与 Angular 集成:

    1. https://github.com/wenzhixin/bootstrap-table/issues/165
    2. https://github.com/AkramKamal/bootstrap-table-examples/tree/master/integrate

    我对这个解决方案的实现有一些小的改动,我将很快上传到 Github / JSFiddle。但是上面的链接可以让你开始。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-08-08
      • 1970-01-01
      • 1970-01-01
      • 2018-05-05
      • 2020-06-15
      • 1970-01-01
      相关资源
      最近更新 更多