2017-12-29 20 views
0

Ich versuche, Zeilen in einer Tabelle zu löschen, aber ich möchte nicht, dass es vollständig leer ist ... die Tabelle beginnt mit einer Zeile, aber der Benutzer kann neue Zeilen hinzufügen, aber auch alle Zeilen löschen und die Tabelle leer machen. Dies ist mein Code für das Hinzufügen und Löschen von Zeilen in meinem Controller:Wie entfernen ng-repeat Tabellenzeile ohne die Tabelle leer zu sein?

$scope.rowItems = [{}]; 

$scope.addRowItems = function() { 
    $scope.rowItems.push(rowItem); 
} 

$scope.deleteRowItem = function(item) { 
    $scope.rowItems.splice(item, 1); 
} 

Und dies ist mein Code für meinen HTML:

<tr ng-repeat:"rowItem in rowItems track by $index"> 
    ...rest of row here... 
</tr> 

Jedwedes Hilfe zu diesem Thema wäre sehr dankbar !!

Antwort

0

Sie können die Länge des Arrays vor dem Spleißen überprüfen und optional eine Warnung an den Benutzer ausgeben, die ihn warnt, dass mindestens eine Zeile in der Tabelle vorhanden sein muss.

$scope.deleteRowItem = function(item) { 
    if($scope.rowItems.length > 1) { 
    $scope.rowItems.splice(item, 1); 
    } else { 
    alert("Can't remove the only row"); 
    } 
} 
+0

Dieses gezeigt wurde nur funktionieren würde, wenn Punkt 'index' geben wurde' .splice' fu nction, not item .. –

+0

das hat wunderbar für mich funktioniert! ich danke dir sehr! – cpick

+0

@PankajParkar - danke, dass Sie darauf hingewiesen haben. Da OP nicht geklärt hat, was "item" darstellt, habe ich angenommen, dass es der Index sein wird. – 31piy

0

Sie können wie die statische Zeile in HTML-Ansicht:

<tr> 
    ...static row columns are here... 
</tr> 
<tr ng-repeat:"rowItem in rowItems track by $index"> 
    ...rest of row here... 
</tr> 

Es ist gute Idee, weil Sie Aktionsschaltflächen hinzufügen/Eingabe in der ersten tr und einfach Aktionsereignisse hinzufügen, um neue Zeile oder etwas hinzufügen

sonst

Oder Sie können Löschen von Zeilen in Komponentenlogik beschränken, wie sie von @31piy

Verwandte Themen