AngularJSを使用してテーブルに列を追加する

Question

ボタンを押したが、成功しなかった場合に列を追加しようとしました。 私はJSFiddle exampleに問題を作りました。 誰かがこの問題で私を助けてくれると大変感謝しています。

これは私の試みである：ここでは

$scope.addValue = function() { 
     $scope.headers.push('new header'); 
     var users = 5; 
     for(var i = 0; i < users; i++) { 
      var rowData = []; 
      for (var j = 0; j < 1; j++) { 
       rowData.push('data i=' + i + ' j=' + j) 
      } 
      $scope.data.push(rowData); 
     } 
    }; 

Answer 1

このJSFiddleに基づく実施例です。

var myApp = angular.module('myApp', []); 
 

 
function MyCtrl($scope) { 
 
    $scope.headers = []; 
 
    $scope.data = []; 
 
    $scope.colCount = 3; 
 

 
    var data = []; 
 

 
    // populate demo data 
 
    for (var i = 0; i < 10; i++) { 
 
    $scope.headers.push('Col ' + (i + 1)); 
 
    var rowData = []; 
 
    for (var j = 0; j < 10; j++) { 
 
     rowData.push('Row-' + (i + 1) + ' - Col ' + (j + 1)) 
 
    } 
 
    data.push(rowData); 
 
    } 
 

 
    $scope.increment = function(dir) { 
 
    (dir === 'up') ? $scope.colCount++: $scope.colCount--; 
 
    } 
 

 
    $scope.data = data; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <button ng-click="increment('up')">Add Column</button> 
 
    <button ng-click="increment('down')">Remove Column</button> 
 
    <table> 
 
    <tr> 
 
     <th ng-repeat="h in headers | limitTo: colCount">{{h}}</th> 
 
    </tr> 
 
    <tr ng-repeat="row in data"> 
 
     <td ng-repeat="item in row | limitTo: colCount">{{item}}</td> 
 
    </tr> 
 
    </table> 
 
</div>

の