Javascript 具有ng重复的动态ng模型

我想动态创建一些输入字段，我在

ng model

中使用了

ng repeat

。我遇到了一些问题<代码>ng型号无

ng重复

工作正常（

transitPointStart

）<代码>传输的工作原理应该完全相同，但它们不是。我错过了什么？ （链接到底部的plunker）

transitPointStart：

       <div class="col-lg-6">
                <div class="form-group">
                    <label class="control-label" for="field_start">Start Point</label>
                    <input type="text" class="form-control" name="field_start" id="field_start"
                           ng-model="transitPointStart.city" placeholder="e.g. London"
                    />
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label class="control-label" for="field_start_date">Date</label>
                    <div class="input-group">
                        <input id="field_start_date" type="text" class="form-control" placeholder="YYYY-MM-DD HH:MM"
                               name="field_start_date"
                               datetime-picker="{{dateformat}}" ng-model="transitPointStart.date"
                               is-open="datePickerOpenStatus.field_start_date"
                        />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default"
                                    ng-click="openCalendar('field_start_date')"><i
                                class="glyphicon glyphicon-calendar"></i></button>
                        </span>
                    </div>
                </div>
            </div>

---

演示：

HTML中的某些绑定不正确。每当需要将数据从模型发送到HTML中时，都需要使用插值（

{{}}

格式）

例如，在分配ID时，您有：

<input id="transit.fieldDateName" type="text" class="form-control" placeholder="e.g" name="transit.fieldDateName" ...

---

我认为您的Plnkr缺少一些使日历工作的脚本和/或步骤，但这些更改至少会导致调用您的

openCalendar

函数。

您的演示中有什么不工作？一切似乎都很好。你能解释一下“它不工作”是什么意思吗？看起来openCalendar在plunker上不工作，因为我错过了一些东西。但每当我点击按钮添加中转时，日历就会打开。还有什么，为什么在添加后填充输入？如果希望添加到列表中的对象为空，则只需执行以下操作：

$scope.transits.push（{}）

这将向列表中添加一个新的空对象。此外，属性引用应与transitPointStart完全相同，例如：

，这将引用空对象。一旦填充模型，城市属性将在列表项ammended中可用。此外，PRUNKR中的日期选择器也不适用于transitPointStart。与此相关的问题不在

ng repeat

中。

 $scope.transits = [];

    $scope.addTransit = function () {
        var tempId = $scope.transits.length + 1;
        var tempName = "transitPoint_" + tempId;
        var tempModelName = tempName + ".city"; // Here I would like to have access to transitPoint.city
        var tempDateName = tempName + ".date";  // as above (transitPoint.date)
        var tempDate = "datePickerOpenStatus.field_transit_date_" + tempId;
        var tempFieldName = "field_transit_" + tempId;
        var tempFieldDateName = "field_transit_date_" + tempId;
        var tempButton = "openCalendar('" + tempFieldDateName + "')";
        $scope.transits.push({
            modelName: tempModelName,
            dateModelName: tempDateName,
            datePickerName: tempDate,
            fieldName: tempFieldName,
            fieldDateName: tempFieldDateName,
            buttonDateName: tempButton
        });
    }
    /*
    {...} - rest of code, sending queries (vm.save() ect.)
    */
    $scope.datePickerOpenStatus = {};
    $scope.datePickerOpenStatus.field_start_date = false;
    $scope.datePickerOpenStatus.field_end_date = false;
    // I should've used loop here
    $scope.datePickerOpenStatus.field_transit_date_1 = false;
    $scope.datePickerOpenStatus.field_transit_date_2 = false;
    $scope.datePickerOpenStatus.field_transit_date_3 = false;

    $scope.openCalendar = function (date) {
        $scope.datePickerOpenStatus[date] = true;
    };

<input id="transit.fieldDateName" type="text" class="form-control" placeholder="e.g" name="transit.fieldDateName" ...

<input id="{{transit.fieldDateName}}" type="text" class="form-control" placeholder="e.g" name="{{transit.fieldDateName}}" ...

<button type="button" class="btn btn-default" ng-click="openCalendar(transit.fieldDateName)">