如何在角度提交时添加文本框答案

【问题标题】：How to add a text box on submit in angular如何在角度提交时添加文本框
【发布时间】：2015-06-14 13:49:30
【问题描述】：

我对 Angular 非常陌生，从官方网站上的文档和使用 plunkr 我能够弄清楚如果我没有错的话，我们使用 ng-repeat 和 push 方法向 DOM 添加新的东西。

我正在尝试查看文档中的这个示例：

<!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 src="app.js"></script>-->
        <script>
            angular.module('controllerAsExample', [])
                .controller('SettingsController1', SettingsController1);

            function SettingsController1() {
                this.name = "John Smith";
                this.contacts = [
                    {type: 'phone', value: '408 555 1212'},
                    {type: 'email', value: 'john.smith@example.org'}
                ];
            }

            SettingsController1.prototype.greet = function () {
                alert(this.name);
            };
            SettingsController1.prototype.addContact = function () {
                this.contacts.push({ value: ''});
            };
            SettingsController1.prototype.removeContact = function (contactToRemove) {
                var index = this.contacts.indexOf(contactToRemove);
                this.contacts.splice(index, 1);
            };
            SettingsController1.prototype.clearContact = function (contact) {
                contact.type = 'phone';
                contact.value = '';
            };
        </script>
    </head>
    <body ng-app="controllerAsExample">
        <div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">
            <label>Name: <input type="text" ng-model="settings.name"/></label>
            <button ng-click="settings.greet()">greet</button><br/>
            Contact:
            <ul>
                <li ng-repeat="contact in settings.contacts">
                    <select ng-model="contact.type" aria-label="Contact method" id="select_{{$index}}">
                        <option>phone</option>
                        <option>email</option>
                    </select>
                    <input type="text" ng-model="contact.value" aria-labelledby="select_{{$index}}" />
                    <button ng-click="settings.clearContact(contact)">clear</button>
                    <button ng-click="settings.removeContact(contact)" aria-label="Remove">X</button>
                </li>
                <li><button ng-click="settings.addContact()">add</button></li>
            </ul>
        </div>
    </body>
</html>

这是我理解的基本概述，但我无法弄清楚 ng-repeat 如何帮助我们添加新元素（推送新元素）。据我所见，它的行为就像 java 中的迭代器。

【问题讨论】：

您的实际问题是什么？您是否要求解释 ng-repeat 的工作原理？
基本上我想了解如何在提交时创建/添加文本框
您没有尝试在此代码中添加新的textbox。您正在向 contacts 数组添加一个新元素，而 ng-repeat 又会为该数组生成一个 <li>，其中恰好有一个 select 和一个 textbox。
如果您一般来说要问为什么这确实有效，那么您可能应该更多地研究一下 Angular 中的 2 路绑定是如何工作的。

标签： angularjs

【解决方案1】：

要以 Angular 的方式进行，您可以拥有一个文本字段元值数组，例如

formFieldArr = [{fieldName: 'name', minLength: '2' ... } , {fieldName: 'gender', minLength: '4' ... }]

有一个 ng-repeat 循环并呈现文本字段。

在 HTML 中

<div ng-repeat="formFieldArr">
    <input name="formField.name" ng-minlength="formField.minLength">
</div>

在您的提交代码中，您只需要添加到数组中即可呈现表单字段。

FormFieldPost.save(){
    onsuccess:
        formFieldArr.push("{fieldName: 'gender', minLength: '4' ... }");
}

如果您考虑的是 DOM，那将是一个 jQuery 解决方案。

进一步扩展，您还可以使用相同的数组来呈现不同类型的表单字段。

formFieldArr = [{fieldName: 'name', minLength: '2', fieldType: 'select' ... } , {fieldName: 'gender', minLength: '4', fieldTypre: 'text' ... }]

在 HTML 中

<div ng-repeat="formFieldArr">
    <input name="formField.name" ng-minlength="formField.minLength" ng-show="formField.fieldType === 'text'">
... Do similar ng-show for select.
</div>

（在手机上打字）

【讨论】：

谢谢。所以我们首先绑定到 formFieldArr，然后将新值推入其中对吗？
是的，我会这样做。您可以将其扩展为能够呈现任何类型的输入字段，例如 { ... fieldType="select"} ... 在您的 HTML 中，使用 ng-show/if 相应地显示。
你能告诉我这段代码有什么问题吗：plnkr.co/edit/GpeAqjP7fl78qEx634Ur?p=preview
@kittu 您在此处的 cmets 中发布的 plunker 存在多个问题；最好将其作为一个新问题提出。主要问题是您使用ng-submit 提交表单，但您实际上没有表单；试试ng-click。
@kittu 还要检查控制台，在寻求代码 sn-p 帮助之前，您应该更正语法错误。