单击 angular js 中的按钮添加新文本框

Question

按下提交按钮时如何添加新的文本框。这是我尝试过的方法，我知道出了点问题。我还是 angular js 的新手。

示例：

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

Answer 1

在你的代码中，你在做：-

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

这就是问题所在。如果你只需要添加一个空的文本框，你只需要向联系人添加一个空的联系人，ng-repeat 将负责在列表中添加新的文本框。另一件事是你正在推动接触，而不是接触。

此外，ngSubmit 用于您没有的表单中。因此，请改用 ng-click。这是显示代码工作的 plunker。

            $scope.addContact = function()
            {
              $scope.contacts.push({ name: '' });
            }

Answer 2

您应该将 ng-submit 替换为 ng-click 以解决您的问题然后你需要改变你的对象结构来持久化一个值，就像你需要在联系人对象中添加联系人号码一样 contact.number

标记

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

代码

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

Demo Plunkr

单击 angular js 中的按钮添加新文本框

Add new text box on click of a button in angular js

angularjs

angularjs-ng-repeat

angularjs-controller