Fügen Sie der Tabelle Spalten, die dynamisch mit Angular.js

Ich versuche zu verwenden Angular.JS dynamisch Spalten hinzufügen, um eine html-Tabelle.

Es beginnt mit einem Satz von Daten, und ich möchte, um zusätzliche Daten auf Klick. Ich bin neu zu Eckig, und aus diesem plunker um zu verdeutlichen, was ich versuche zu tun. Ich möchte (natürlich) nur eine neue Tabelle hinzufügen header und eine neue Tabelle, die Daten basierend auf der Anzahl der Elemente im array, abgestimmt auf die index-Nummer der gleichen Zeile. Danke

Controller:

function Ctrl($scope) {
$scope.data = [];
$scope.data[3] = [];
$scope.data[0] = [['New York', 1000,2000],['Los Angeles', 200,400],['Nottingham', 800,400]]
$scope.moredata = [1500, 2500, 4500];
temp = []
$scope.getData = function() {
  $scope.moduleArray[1] = $scope.moredata;
}
$scope.moduleArray = $scope.data;
}

HTML:

<div ng-controller="Ctrl">
  <button ng-click="getData()">Get more data</button>
  <table>
  <tr>
      <th>Location</th>    
      <th>Current Data</th> 
      <th ng-repeat="ba in moduleArray[1]">new data</th>    
  </tr>
  <tr data-ng-repeat="item2 in moduleArray[0]">   
      <td>2[0]{{item2[0]}}</td>  
            <td>2[1]{{item2[1]}}</td>   
      <td data-ng-repeat="bat in moduleArray[1]">{{bat[$parent.$index]}}</td>
  </tr>
</table>

Plunkr

  • Wird das hinzufügen/entfernen von Spalten immer durchgeführt werden, auf der rechten Seite um? Wenn dem so wäre failry einfach zu map new sub-arrays, jedes mal, wenn Spalten ändern, und verwenden Sie die Spalte Länge zu bestimmen, array-Länge und entfernen, was nicht benötigt wird aus Daten zu jeder Zeit
InformationsquelleAutor phillydigital | 2016-05-29
  1. 6

    Hier ist sehr einfach eingerichtet, schaltet einzelne Spalten auf der rechten Seite.

    Es gibt 2 Arten von arrays, eins für die Spaltenüberschriften und eine für die Zeile Daten.
    Es nutzt limitTo filter für ng-repeat.

    Von dort aus ist es eine einfache Inkrement - /Dekrement von einer scope-variable colCount Spalten hinzufügen/entfernen

    Ansicht

      <button ng-click="increment('up')">Add Column</button>
  <button ng-click="increment('down')">Remove Column</button>
  <table class="table table-bordered">
    <tr>
      <th ng-repeat="col in cols | limitTo: colCount">{{col}}</th>
    </tr>
    <tr ng-repeat="row in data">
      <td ng-repeat="item in row | limitTo: colCount">{{item}}</td>
    </tr>
  </table>

    Controller

      //used as limit for ng-repeat limitTo
  $scope.colCount = 3;

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

  $scope.cols = //array of column names
  $scope.data = //row data arrays

    Beachten Sie, dass für große Tabellen kann dies nicht für Leistung, die durch mehrfache verschachtelten Repeater

    DEMO

    • Dank charlieftl. die Sache ist die, ich mache API-Aufrufe zu bekommen, dass zusätzliche Daten, so dass änderungen und ist nicht Teil des original-array. dankbar für Ihre Hilfe
    • Gut, dass ist nicht ganz klar zu mir...und weder ist die ursprüngliche Frage konkret genug
    • Danke, du hast beantwortet meine beiden soll Frage und die Frage gepostet, dass ich (oft für ein noob). Ich brauchte, um limitTo auf das äußere array, das macht jetzt Sinn. Dank
    InformationsquelleAutor charlietfl
Schreibe einen Kommentar