从dropdown angularjs动态添加/删除列

时间:2016-11-17 06:14:16

标签: angularjs

如果我单击删除列必须从表中删除的列名称,并且表中未列出的列必须在添加列中

与删除列一样,还有其他添加列和保存按钮。

enter image description here

1 个答案:

答案 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"
  }
  ]
}]);

希望这有帮助。