2016-11-17 93 views
0

如果我点击删除列必须从表中删除,也未在表中列出的列必须在加列动态添加/删除下拉列angularjs

想删除列会有其他列名添加列并保存按钮。

enter image description here

+0

维护一个名称为列的数组并根据您的需要更新它,以添加和删除列,并在表中放置' {{col}}'数据使用'” {{data ['col']}}' – codeomnitrix

+0

然后它将显示数组中的所有标题 –

+0

一旦检查上面的图像 –

回答

1

看一看的plunkr。您可以添加或删除控制器内维护的阵列中的列以更新您的表。

https://plnkr.co/edit/w90MlA?p=preview

HTML -

<div ng-app="demoApp" ng-controller="demoCtrl"> 

    <table border="1"> 
     <thead> 
     <tr> 
      <th ng-repeat="col in cols">{{col}}</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="row in rows"> 
      <td ng-repeat="col in cols"> 
      {{row[col]}} 
      </td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

JS -

// Code goes here 

var demoApp = angular.module("demoApp", []); 

demoApp.controller("demoCtrl", ['$scope', function($scope){ 
    $scope.cols = ['A', 'B', 'C']; 
    $scope.rows = [ 
    { 
    'A': "1", 
    'B': "2", 
    'C': "3", 
    'D': "4" 
    }, 
    { 
    'A': "5", 
    'B': "6", 
    'C': "7", 
    'D': "8" 
    }, 
    { 
    'A': "11", 
    'B': "21", 
    'C': "31", 
    'D': "41" 
    } 
    ] 
}]); 

希望这有助于。

+0

谢谢,我想我喜欢列名中的10列名称,默认情况下,我会显示5列,上面的表会有偏好下拉菜单中会有添加列,删除列并保存.i添加列,其余列名将从列表中显示.in删除列列名中显示的列ble必须在那里 –

+0

如果你从首选项删除列名 - >删除列 - >列名,然后删除的列名必须添加到首选项 - >添加列(下拉) –

+0

看看更新的plunkr https:/ /plnkr.co/edit/w90MlA?p=preview – codeomnitrix