Ajouter de nouveaux zone de texte sur le clic d'un bouton en angular js

Comment puis-je ajouter de nouveaux zone de texte lors de la soumettre le bouton est enfoncé. C'est ce que j'ai essayé et je sais qu'il ya quelque chose de mal. Je suis encore nouveau pour angular js.

Exemple:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Example - example-ngController-production</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
        <script>
            angular.module('controllerAsExample', []).controller('SettingsController1', function ($scope) {

                $scope.contacts=[]
                $scope.addContact = function()
                {
                  $scope.contact.push({$scope.contact})
                }
            });
            };
        </script>
    </head>
    <body ng-app="controllerAsExample">
        <div id="ctrl-as-exmpl" ng-controller="SettingsController1">

            <ul>
                <li ng-repeat="contact in contacts">
                    <input type="text" ng-model="contact" />
                </li>
                <li><button ng-submit="addContact()">add</button></li>
            </ul>
        </div>
    </body>
</html>
InformationsquelleAutor | 2015-06-14
  1. 1

    Dans votre code, vous êtes en train de faire:-

            $scope.addContact = function()
        {
          $scope.contact.push({$scope.contact})
        }

    C'est où est le problème. Si vous avez juste besoin d'ajouter une zone de texte vide, vous avez juste besoin d'ajouter un contact vide de contacts, et ng-repeat prendra soin de l'ajout de la nouvelle zone de texte dans la liste. Une autre chose est que vous étaient en train de pousser en contact, et pas de contacts.

    Aussi, ngSubmit est utilisé à l'intérieur d'un formulaire, que vous n'avez pas. Ainsi, l'utilisation de ng-cliquez sur la place. Voici une plunker indiquant le code de travail.

                $scope.addContact = function()
            {
              $scope.contacts.push({ name: '' });
            }
    • Ce qui est suivi par l'index$ auquel vous avez ajouté le code?
    • si vous ne le faites pas suivi par $index, vous obtiendrez l'erreur de Doublons dans un répéteur ne sont pas autorisés, à cause des doubles de clés ne sont pas autorisés dans ngRepeat. En disant piste par $index, c'est de donner à chaque élément d'une clé unique, $index. Pour plus d'informations, voir ici - docs.angularjs.org/error/ngRepeat/...
    • est-il vraiment conserver une valeur..?
    • ma solution originale à ne pas persister la valeur. Pour le rendre persistent, vous devrez ajouter le contact comme un objet, et non pas un type primitif. J'ai édité ma réponse et la plunker de le démontrer.
    InformationsquelleAutor Abhishek Jain
  2. 2

    Vous devez remplacer votre ng-submit avec ng-click qui permettra de résoudre votre problème
    Et avec ce que vous avez besoin de changer la structure de l'objet de conserver une valeur, comme vous devez ajouter le numéro de contact en contact de l'objet comme contact.number

    Balisage

    <ul>
    <li ng-repeat="contact in contacts">
      <input type="text" ng-model="contact.number" />
    </li>
    <li>
      <button type="button" ng-click="addContact()">add</button>
    </li>
</ul>

    Code

    angular.module('controllerAsExample', [])
.controller('SettingsController1', function($scope) {
  $scope.contacts = []
  $scope.addContact = function() {
    $scope.contacts.push({
    })
  }
});

    Démo Plunkr

    • Merci de répondre à ça: stackoverflow.com/questions/30829370/...
    • cochez la case j'ai ajouté réponse..l'approche proposée ici a contribué à leur..de toute façon oeil à la mine réponse
    • elle fonctionne.pouvez-vous ajouter un bouton supprimer pour chaque élément.
    InformationsquelleAutor Pankaj Parkar