Question

我对角度很新，并且从官方网站上的文档和使用plunkr我能够弄清楚我们使用ng-repeat和push方法为DOM添加新内容如果我没有错。

我正在尝试通过docs上的这个示例：

<!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中的迭代器一样。

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

（在手机上打字）

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

1 个答案: