Angularjs 角度数据表更改列数_Angularjs

Angularjs 角度数据表更改列数

angularjs

Angularjs 角度数据表更改列数,angularjs,Angularjs,我使用的是角度数据表（）我放了这个东西：我正试图根据从服务器提取的数据动态更改datatable中的列数。有办法做到这一点吗？我正在使用“角度方式”控件： <table datatable="ng"></table> })你可能已经弄明白了吗？对我来说，它保留了之前的列数，并为新列插入了前N个数据，就是这样。其他数据“丢失”，而不是更新，即使我调用dtInstance.rerender（）或dtInstance.changeData（），我也会在@trainoas

我使用的是角度数据表（）

我放了这个东西：

我正试图根据从服务器提取的数据动态更改datatable中的列数。有办法做到这一点吗？我正在使用“角度方式”控件：

<table datatable="ng"></table>

})

你可能已经弄明白了吗？对我来说，它保留了之前的列数，并为新列插入了前N个数据，就是这样。其他数据“丢失”，而不是更新，即使我调用dtInstance.rerender（）或dtInstance.changeData（），我也会在@trainoasis:）之后找到答案

<!DOCTYPE html>
<html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />'); </script>
<link rel="stylesheet" href="style.css" />


</head>

<body ng-controller="MainCtrl as mCtrl">
<table id="dtFeeDetails" datatable="ng" dt-options="mCtrl.dtOptionsForFeeDetails" dt-column-defs="mCtrl.dtColumnDefs" dt-instance="mCtrl.dtInstance">

    <tbody>
        <tr dt-rows ng-repeat="f in feeData">
            <td ng-repeat="c in colHeadings">{{f[c.Value]}}</td>
        </tr>
    </tbody>
</table>

<p>
    <button type="button" ng-click="changeColumnDefs()">Change column defs</button>
</p>

<script data-require="jquery@1.10.1" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script type="text/javascript" src="https://rawgithub.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
<script src="app.js"></script>

var app = angular.module('plunker', ['datatables']);

app.controller('MainCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder) {
var vm = this;
$scope.feeData = [{ val1: 'data1'}, { val1: 'data2'}];
$scope.colHeadings = [{ Value: 'val1' }];
vm.dtInstance = {};
vm.dtColumnDefs = [
            DTColumnDefBuilder.newColumnDef(0).withTitle($scope.colHeadings[0].Value)
        ];
vm.dtOptionsForFeeDetails = DTOptionsBuilder.newOptions();
var dtFeeDetailsID = "dtFeeDetails";


$scope.changeColumnDefs = function() {
  //$('#' + dtFeeDetailsID).DataTable().destroy();
  //$('#' + dtFeeDetailsID).dataTable();

  // this won't work, because we're changing the number of columns
  $scope.colHeadings = [{ Value: 'val1' }, { Value: 'val2' }];
  $scope.feeData = [{ val1: 'data3', val2: 'data5'}, { val1: 'data4', val2: 'data6'}];
  vm.dtColumnDefs = [];
  vm.dtColumnDefs = [
    DTColumnDefBuilder.newColumnDef(0).withTitle($scope.colHeadings[0].Value),
    DTColumnDefBuilder.newColumnDef(0).withTitle($scope.colHeadings[1].Value)
    ];

  // this will work, because we're keeping the same number of columns  
  //$scope.colHeadings = [{ Value: 'val2' }];
  //$scope.feeData = [{ val2: 'data3'}, { val2: 'data4'}]; 
  //vm.dtColumnDefs = [];
  //vm.dtColumnDefs = [
  //  DTColumnDefBuilder.newColumnDef(0).withTitle($scope.colHeadings[0].Value),
  //  ];
};