具有ng-repeat的动态ng模型

时间:2016-05-03 12:18:03

标签: javascript angularjs

我想动态创建一些输入字段,我使用ng-repeatng-model。我遇到了一些问题。没有ng-model的{​​{1}}正常工作(ng-repeat)。 transitPointStart应该完全相同,但事实并非如此。我错过了什么? (链接到底部的plunker)

transitPointStart:

transits

转变:

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

控制器:

 <div class="row" ng-repeat="transit in transits">

            <!--TEST-->
            <!--<div> Model: {{transit.modelName}} </div>-->
            <!--<div> dateModel: {{transit.dateModelName}} </div>-->
            <!--<div> datePicker: {{transit.datePickerName}} </div>-->
            <!--<div> fieldName: {{transit.fieldName}} </div>-->
            <!--<div> fieldDateName: {{transit.fieldDateName}} </div>-->
            <!--<div> button: {{transit.buttonDateName}} </div>-->
            <!--/TEST-->

            <div class="col-lg-6">
                <div class="form-group">
                    <label class="control-label" for="transit.fieldName">Transit {{$index+1}}</label>
                    <input type="text" class="form-control" name="transit.fieldName" id="transit.fieldName"
                           ng-model="transit.modelName" placeholder="transit"
                    />
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label class="control-label" for="transit.fieldDateName">Date {{$index+1}}</label>
                    <div class="input-group">
                        <input id="transit.fieldDateName" type="text" class="form-control" placeholder="e.g"
                               name="transit.fieldDateName"
                               datetime-picker="{{dateformat}}" ng-model="transit.dateModelName"
                               is-open="transit.datePickerName"
                        />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default"
                                    ng-click="transit.buttonDateName"><i
                                class="glyphicon glyphicon-calendar"></i></button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-2"></div>
            <div class="col-lg-2">
                <span class="btn btn-primary" ng-click="addTransit()" ng-if="transits.length < 3">Add transit</span>
            </div>
            <div class="col-lg-2"></div>
        </div>

演示:Plunker

1 个答案:

答案 0 :(得分:3)

HTML中的某些绑定不正确。每当需要将模型中的数据发布到HTML中时,都需要使用插值({{ }}格式)。

例如,在分配ID时,您有:

<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}}" ...

其次,您的ng-click语法不正确。您不应该在JavaScript中创建openCalendar表达式,而是在HTML中创建,如下所示:

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

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