Fügen Sie neue text-box, die auf Knopfdruck in angular js

Wie füge ich neuen text-box, wenn submit-button gedrückt wird. Dies ist, was ich versucht habe und ich weiß, es gibt einige, was falsch ist. Ich bin noch neu auf angular js.

Beispiel:

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

    In Sie code, die Sie tun:-

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

    Dies ist, wo das problem ist. Wenn Sie müssen nur fügen Sie ein leeres Textfeld, das Sie gerade hinzufügen müssen, um einen leeren Kontakt zu Kontakte, und ng-repeat kümmert hinzufügen neue textbox in der Liste. Eine andere Sache ist, dass du Druck in Kontakt ist, und nicht die Kontakte.

    Auch, ngSubmit ist in einer form, die Sie nicht haben. Also, nutzen Sie ng-klicken Sie auf statt. Hier ist ein plunker zeigt den code arbeiten.

                $scope.addContact = function()
            {
              $scope.contacts.push({ name: '' });
            }
    Was ist der track von index$, die Sie Hinzugefügt haben, um den code?
    wenn Sie nicht track by $index, erhalten Sie die Fehlermeldung, die Duplikate in einem repeater sind nicht erlaubt, weil es doppelte Schlüssel sind nicht erlaubt in ngRepeat. Indem Sie sagen, track by $index, es gibt jedes Element einen eindeutigen Schlüssel, $index. Für mehr Informationen, siehe hier - docs.angularjs.org/error/ngRepeat/...
    Ich danke Ihnen so sehr
    ist es wirklich bestehen und Wert..?
    meine ursprüngliche Lösung nicht beibehalten Wert. Um es fortbestehen, Sie haben zum hinzufügen von Kontakten als ein Objekt und kein primitiver Typ. Ich bearbeitet meine Antwort und die plunker dies demonstrieren.

    InformationsquelleAutor Abhishek Jain

  2. 2

    Ersetzen Sie Ihren ng-submit mit ng-click dass wird Ihr problem lösen
    Und mit, dass Sie brauchen, um Ihre Objekt-Struktur beibehalten einen Wert, wie Sie brauchen, um hinzuzufügen, Kontakt-Telefon Kontakt-Objekt wie contact.number

    Markup

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

    Demo Plunkr

    Bitte beantworten Sie diese hier: stackoverflow.com/questions/30829370/...
    überprüfen Sie die ich Hinzugefügt habe, Antwort da..die Herangehensweise, die ich hier vorgeschlagen wird, hat dazu beigetragen, Ihre..Jedenfalls bei mir Aussehen Antwort
    es funktioniert.können Sie fügen Sie eine Schaltfläche löschen, um jedes element.

    InformationsquelleAutor Pankaj Parkar

Schreibe einen Kommentar