Ng-init, jeśli macie jeszcze nie utworzono

Question

Próbuję zbudować szablon dla aplikacji i chcę wyświetlić dynamiczną listę z nazwami. więc mam ten kod, aby pokazać listę i dodać/usunąć wiersze;

<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> 

rzeczą, jako że gdy ten szablon jest ładowany page.busnessRows najprawdopodobniej będzie ładowany z wierszy więc chcę zmienić ng-init tylko utworzyć pustą tablicę, jeśli businessRows nie zostaje zainicjowany.

Próbowałem już ng-init="page.businessRows = page.businessRows.length < 1 ? [] : page.businessRows, ale to nie zadziałało. Jak mam zamiar zrobić warunki w wyrażeniach jsangular?

Cała pomoc doceniona. Z góry dziękuję

Answer 1

Można to zrobić w zamian:

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

Aktualizacja

patrzę na kod parsera z angularjs i zauważ, że w wersji 1.2 (obecnie RC) obsługuje potrójny wyraz. Więc jeśli używasz angularjs 1.2, to będzie również działać (choć bardziej gadatliwy niż powyższym kodzie):

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

Zobacz demo tutaj.

jednak oryginalny kod nie może działać, jeśli page.businessRows jest null, ponieważ parser nie uda się dereference length własność null. Więc bądź ostrożny.

Answer 2

Nie sądzę, że ng-init poprawnie oceni wyciągi warunkowe. Ale możesz zmienić warunek w funkcję kontrolera i wywołać funkcję z ng-init.

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

Po prostu umieść ocenę warunkową w funkcji w zakresie kontrolera.

Answer 3

Myślę, że próbujesz rozwiązać niewłaściwy problem.

Problem polega na tym, że zezwalasz na wykonanie akcji przed załadowaniem lub przygotowaniem danych. Dodatkowym problemem jest użycie wyrażenia w ng-kliknięciu, w którym powinna znajdować się funkcja zakresu lub funkcja kontrolera.

Więc ...

1. wyłączyć ten przycisk, jeśli formularz nie jest gotowy.
2. Użyj tych kontrolek do kontroli tych interakcji.

Oto przykład kontrolera. Dodano $ timeout, aby zasymulować opóźnione ładowanie danych do zmiennej $ scope.page.

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); 
    } 
    }; 
}); 

...a widok HTML (zauważ NG-disabled i NG-Click) (i brak ng inicjalizacji):

<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> 

Również here's the obligatory Plunker for you to see this in action.