Question

晚上好，

我正在尝试创建一个动态的表单，这意味着用户可以通过单击按钮添加一些<input>标记。使用javascript轻松完成此类行为，每当用户感觉到时添加元素，将其附加到父元素，在本例中为表单。

input标签的动态特性来自于需要在数组中存储一堆值，这些值必须稍后被推入mongodb文档中并且未设置元素数量，因此是动态性质。举个例子来说明我的意思：

<form>
    <fieldset>
        <legend>Username and ID</legend>
        <input type="text" name="username" />
        <input type="text" name="uniqueId" />
    </fieldset>

    <fieldset>
        <legend>Places the user can go to</legend>
        <input type="text" /> <!-- user input would be "pub" -->
        <input type="text" /> <!-- user input would be "market" -->
        <input type="text" /> <!-- user input would be "cinema" -->
        <input type="text" /> <!-- user input would be "computer store" -->

        <!-- other elements, added dynamically -->
        <!-- the user might be able to go also to the gym, or the park,
             he is the one that decides the number of places to add to the
             input -->
    </fieldset>
</form>

我想要的是将这些输入值一起存储在一个已经是对象一部分的数组中，如下所示：

myObject = {
    username: "Ryan",
    uniqueId: "A001",
    canGoTo : [
        "pub", 
        "market",
        "cinema",
        "computer store",
        ...other inputs that the user might have added and wrote]
}

canGoTo键将填充用户在该表单的各种输入中插入的值。我如何将它们存储在数组canGoTo？

中

编辑：我正在使用AngularJS和ng-submit

Answer 1

您可以使用ng-model来定位数组的特定索引。类似的东西：

<form>
    <fieldset>
        <legend>Username and ID</legend>
        <input type="text" name="username" />
        <input type="text" name="uniqueId" />
    </fieldset>

    <fieldset>
        <legend>Places the user can go to</legend>

        <input type="text" ng-repeat="input in myObject.canGoTo"
               ng-model="myObject.canGoTo[$index]" />
    </fieldset>
</form>

添加新输入：

$scope.myObject.canGoTo.push ('');

您需要在操作实际表单方面对您提供的各种功能进行一些测试，但这应该是一个很好的启动点。

Answer 2

如果你给所有相关的输入都是同一个类，你可以使用getElementsByClassName（），然后遍历返回的数组，并在创建一个canGoTo.push（elementArray [i] .value）之后做一些事情。空的canGoTo数组。

如果您想一次添加一个，您需要添加的是一个跟踪当前输入索引号的变量。

将多个输入存储在JSON键中作为数组的一部分

2 个答案: