Question

我有一个包含另一个div的div，它还包含三个输入元素。在其中一个输入元素上，我使用的是仅限角数的指令和on-change指令。我在这个div外面有一个按钮，点击这个div包含克隆的三个输入元素并使用jquery附加到主div。所以为了使指令工作我正在使用$ compile函数重新编译主指令，这是正常工作。但问题是，当重新加载该页面时，我需要填充已保存的数据，我再次使用相同的克隆函数创建另一行然后jquery代码来填充动态创建的输入元素但是它没有显示数据元素。我已经将代码附加到crate动态元素并填充这些元素

var bootableId = '';
var dyanamicLocation = $('#divLocation').clone(true);
var createRemoveButton = $(dyanamicLocation).find('.removeDynamicDiv');
var Id = $('*[locIndex]').length;
bootableId = '#divLocation' + Id;
$(dyanamicLocation).attr('id', 'divLocation' + Id);
$(dyanamicLocation).find('#Starthours').attr('data-ng-model', 'Starthours' + Id);
$(dyanamicLocation).find('#Startmins').attr('data-ng-model', 'Startmins' + Id);
$(dyanamicLocation).find('#Endhours').attr('data-ng-model', 'Endhours' + Id);
$(dyanamicLocation).find('#Endmins').attr('data-ng-model', 'Endmins' + Id);
$(dyanamicLocation).find("#location").attr("ng-model", 'location' + Id);
$(dyanamicLocation).find("#locationDate").removeAttr("data-ng-model");
$(dyanamicLocation).find("#location").removeAttr("ng-model");

$(dyanamicLocation).find('#Starthours,#Startmins,#location,#Endhours,#Endmins').val('');
$(dyanamicLocation).find("#locationDate").attr("disabled", true);
$('#divtotLocations').append(dyanamicLocation);
if ($('*[locIndex]').length > 1) {
createRemoveButton.css('display', 'block');
createRemoveButton.on('click', function () { removeDynamicObjects(this); });
}
var rebootableElement = $(bootableId);
$compile(rebootableElement.contents())($scope);

，HTML是

<div id="divtotLocations">
    <div id="divLocation" class="divLocation" locindex="0">
        <div class="row margin-top-10">
            <div class="col-md-8"><span id="locationError" style="display:block;color:red;" name="SpanMessageLocation"></span></div>
            <div class="col-md-4">
                <span removetype="location" class="btn btn-sm btn-default-small pull-right removeDynamicDiv" style="display:none;">REMOVE</span>
            </div>
        </div>
        <div class="row margin-top-20">
            <div class="col-md-4">
                <label class="text-label">ROOM: <span class="redText">*</span></label>
                <input id="location" name="location" ng-model="location" data-ng-keyup="chkLoctionExists($event)"  style="box-shadow: 0px 0px 0px 0px; " type="text" value="" class="text-field" required>
            </div>
            <div class="col-md-4">
                <label class="text-label">DATE: <span class="redText">*</span></label>
                <input id="locationDate" class="text-field datepicker calenderIcon" name="locationDate" type="text" data-ng-model="locationDate" eps-datepicker mindate="{{minDate}}" ng-readonly="true"/>
            </div>

            <div class="minwidth160 pull-left">
                <label class="text-label">START TIME: <span class="redText">*</span></label>
                <div style="float: left; margin-right: 2px;">
                    <input id="Starthours" class="text-content-reg startendtime" placeholder="HH" name="Starthours" type="text" ng-change="validateHours(this);" data-ng-model="Starthours" maxlength="2" numbers-only="numbers-only" />
                </div>
                <div style="float: left; margin-right: 2px;">
                    <input id="Startmins" class="text-content-reg startendtime" placeholder="MM" name="Startmins" type="text" ng-change="validateMinnute(this);" data-ng-model="Startmins" maxlength="2" numbers-only="numbers-only">
                </div>
                <div class="pull-left">
                    <select id="ddlStartAMPM" name="ddlStartAMPM" class="startendtimeselect selectgrey">
                        <option value="AM">AM</option>
                        <option value="PM">PM</option>
                    </select>
                </div>
            </div>
            <div class="minwidth160 pull-left">
                <label class="text-label">END TIME: <span class="redText">*</span></label>
                <div style="float: left; margin-right: 2px;">
                    <input id="Endhours" class="text-content-reg startendtime" name="Endhours" placeholder="HH" type="text" data-ng-model="Endhours" ng-change="validateHours(this);" maxlength="2" numbers-only="numbers-only" />
                </div>
                <div style="float: left; margin-right: 2px;">
                    <input id="Endmins" class="text-content-reg startendtime" name="Endmins" placeholder="MM" type="text" data-ng-model="Endmins" ng-change="validateMinnute(this);" maxlength="2" numbers-only="numbers-only" />
                </div>
                <div class="pull-left">
                    <select id="ddlEndAMPM" name="ddlEndAMPM" class="startendtimeselect selectgrey">
                        <option value="AM">AM</option>
                        <option value="PM">PM</option>
                    </select>
                </div>
            </div>
        </div>
        <hr class="hr-dashed">
    </div>
</div>

动态创建元素的角度js

0 个答案: