Ng-init, wenn das Array noch nicht erstellt wurde

Question

Ich versuche eine Vorlage für eine Anwendung zu erstellen und möchte eine dynamische Liste mit Namen anzeigen. Also habe ich diesen Code, um die Liste anzuzeigen und Zeilen hinzufügen/entfernen;

<table ng-init="page.businessRows = []"> 
<thead> 
    <tr> 
     <th>Company</th> 
     <th>Contact</th> 
     <th>Phone</th> 
    </tr> 
</thead> 
    <tr ng-repeat="row in page.businessRows"> 
     <td> 
      <input type="text" ng-model="row.name" /> 
     </td> 
     <td> 
      <input type="text" ng-model="row.contact" /> 
     </td> 
     <td> 
      <input type="text" ng-model="row.phone" /> 
     </td> 
     <td> 
      <button ng-click="page.businessRows.splice($index,1)"> 
       Remove 
      </button> 
     </td> 
    </tr> 
</table> 
<button class="btn" ng-click="page.businessRows.push({})">addRow</button> 

das Ding als dass, wenn diese Vorlage page.busnessRows höchstwahrscheinlich mit Zeilen geladen wird geladen wird, so dass ich die ng-init nur erstellen Sie die leere Array ändern möchten, wenn businessRows nicht initialisiert wird.

Ich habe ng-init="page.businessRows = page.businessRows.length < 1 ? [] : page.businessRows versucht, aber es hat nicht funktioniert. Wie soll ich Bedingungen in jsangularen Ausdrücken machen?

Alle Hilfe wird geschätzt. Vielen Dank im Voraus

Answer 1

Sie können dies stattdessen tun:

<table ng-init="page.businessRows = page.businessRows || []"> 

aktualisieren

I am Parsercode von AngularJS schauen und feststellen, dass die Version 1.2 (aktuell RC) unterstützt ternären Ausdruck. Also, wenn Sie 1.2 AngularJS verwenden, dies funktioniert auch (obwohl ausführlicher als der obige Code):

<table ng-init="page.businessRows = page.businessRows == null ? [] : page.businessRows"> 

Siehe demo hier.

jedoch Ihr ursprünglicher Code möglicherweise nicht, wenn page.businessRowsnull ist, weil der Parser zu dereferenzieren length Eigenschaft null fehl. Sei also vorsichtig dort.

Answer 2

Ich glaube nicht, dass die ng-init bedingte Anweisungen richtig auswerten wird. Sie könnten die Bedingung jedoch in eine Controllerfunktion umwandeln und die Funktion von ng-init aufrufen.

<table ng-init="initializeBusinessRows(page.businessRows)"> 

Die nur Ihre bedingte Auswertung in der Funktion auf dem Controller-Bereich.

Answer 3

Ich glaube, Sie versuchen, das falsche Problem zu lösen.

Das Problem ist, dass Sie eine Aktion zu treten sind erlaubt, bevor die Daten geladen oder bereit ist. Ein zweites Problem besteht darin, dass Sie einen Ausdruck in einem ng-Klick verwenden, der eine Bereichsfunktion oder eine Controller-Funktion enthalten sollte.

So ...

1. diese Taste deaktivieren, wenn das Formular nicht bereit ist.
2. Verwenden Sie Ihre Controller Kontrolle diese Wechselwirkungen.

Also hier ist ein Beispiel für die Steuerung. Das $ -Zeitlimit wurde hinzugefügt, um eine verzögerte Datenlast in Ihre Variable $ scope.page zu simulieren.

app.controller('MyCtrl', function($scope, $timeout, $window) { 
    //Timeout to simulate the asynchronous load 
    //of the page object on the $scope 
    $timeout(function(){ 
    $scope.page = { 
     businessRows: [] 
    }; 
    }, 2000); 


    //scope method to add a row. 
    $scope.addRow = function(){ 
    //for safety's sake, check to see if the businessRows array is there. 
    if($scope.page && angular.isArray($scope.page.businessRows)) { 
     $scope.page.businessRows.push({}); 
    } 
    }; 

    //scope method to remove a row 
    $scope.removeRow = function(index, row) { 
    if($window.confirm('Are you sure you want to delete this row?')) { 
     $scope.page.businessRows.splice(index, 1); 
    } 
    }; 
}); 

...und die HTML-Ansicht (man beachte den ng-disabled und den ng-Klick) (und das Fehlen von ng-init):

<div ng-controller="MyCtrl"> 
    <table> 
     <thead> 
     <tr> 
      <th>Company</th> 
      <th>Contact</th> 
      <th>Phone</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="row in page.businessRows"> 
      <td> 
       <input type="text" ng-model="row.name" /> 
      </td> 
      <td> 
       <input type="text" ng-model="row.contact" /> 
      </td> 
      <td> 
       <input type="text" ng-model="row.phone" /> 
      </td> 
      <td> 
       <button ng-click="removeRow($index, row)"> 
        Remove 
       </button> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    <button class="btn" ng-disabled="!page" ng-click="addRow()">addRow</button> 
    </div> 

Auch here's the obligatory Plunker for you to see this in action.