Ng-init si le tableau n'est pas encore créé

Je suis en train de construire un modèle pour une application et que vous voulez afficher une liste dynamique avec des noms. donc j'ai ce code pour afficher la liste et d'ajouter/supprimer des lignes;

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

la chose que lorsque ce modèle est chargée de la page.busnessRows sera probablement chargé avec des lignes donc je veux changer la ng-init à seulement créer le tableau vide si businessRows n'est pas initialisé.

J'ai essayé ng-init="page.businessRows = page.businessRows.length < 1 ? [] : page.businessRows mais cela n'a pas fonctionné. Comment suis-je inteded de faire des conditions dans jsangular expressions?

Toute aide appréciée. Merci d'avance

OriginalL'auteur oBusk | 2013-08-30

24

Vous pouvez faire ceci à la place:
```
<table ng-init="page.businessRows = page.businessRows || []">
```
Mise à jour

Je regarde le code analyseur d'AngularJS et de l'avis que la version 1.2 (actuellement RC) prend en charge ternaire expression. Donc, si vous utiliser AngularJS 1.2, ce sera également le travail (bien plus détaillé que le code ci-dessus):
```
<table ng-init="page.businessRows = page.businessRows == null ? [] : page.businessRows">
```
Voir démo ici.

Cependant, votre code d'origine peut ne pas fonctionner si page.businessRows est null, parce que l'analyseur ne parviennent pas à déréférencer length propriété de null. Alors, soyez prudent.

Cela résout le problème, il a demandé à propos. Mais je ne pense pas qu'il permet de résoudre le plus grand problème de la tentative d'utilisation de la Vue en tant que Contrôleur.
Je vois votre point de vue. Moi aussi, rarement, si jamais, ng-init. Cela dit, je ne peux pas parler pour tout le monde et de leurs besoins. Après tout, la directive est là et si quelqu'un pense qu'il aide à résoudre leur problème, tant mieux pour eux.

OriginalL'auteur
3

Je ne pense pas que le ng-init évaluera les instructions conditionnelles correctement. Mais vous pourriez refactoriser la condition dans une fonction de contrôleur et d'appeler la fonction de ng-init.
```
<table ng-init="initializeBusinessRows(page.businessRows)">
```
La il suffit de mettre votre conditionnelle de l'évaluation dans la fonction du contrôleur de portée.

OriginalL'auteur

Je pense que vous essayez de résoudre le mauvais problème.

Le problème, c'est que vous êtes en permettant la réalisation d'une action avant le chargement des données ou de prêt. Un autre problème est que vous êtes à l'aide d'une expression dans une ng-cliquez à l'endroit où la portée de la fonction ou de la fonction de contrôleur devrait être.

Donc...

Désactivez ce bouton si le formulaire n'est pas prêt.
Utilisation de votre contrôleur pour contrôle ces interactions.

Voici un exemple du contrôleur. L' $timeout a été ajouté à simuler un retard de charger des données en dollars de votre portée.page variable.

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

... et la vue HTML (avis de la ng-désactivé et le ng-click) (et le manque de 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>

Aussi, ici obligatoire Plunker pour vous de le voir en action.

... de même, vous aurez probablement envie d'avoir votre contrôleur de mettre en place un "removeRow(ligne)," la méthode. Je vais ajouter que réel rapide.

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.