Javascript 未将标准输入添加到Angularjs表单$Scope
好吧,有一些背景故事。我们在应用程序中使用Angularjs 1.3.15,并在表单中动态添加表单元素。查看表单范围时,普通输入元素不在其中,但ui select和tags输入元素在其中。下面是我们的动态元素的指令代码和其中一个模板的代码 这是指令代码 这是元素代码Javascript 未将标准输入添加到Angularjs表单$Scope,javascript,html,angularjs,forms,angular-directive,Javascript,Html,Angularjs,Forms,Angular Directive,好吧,有一些背景故事。我们在应用程序中使用Angularjs 1.3.15,并在表单中动态添加表单元素。查看表单范围时,普通输入元素不在其中,但ui select和tags输入元素在其中。下面是我们的动态元素的指令代码和其中一个模板的代码 这是指令代码 这是元素代码 这就是使用指令的地方 {{field.Label} 工作模板html {{$select.selected.Name} 我尝试过使用ng表单和嵌套表单。我也尝试过创建一个表单列表,比如myForm.form,但没有成功。
这就是使用指令的地方
{{field.Label}
工作模板html
{{$select.selected.Name}
我尝试过使用ng表单和嵌套表单。我也尝试过创建一个表单列表,比如myForm.form,但没有成功。我甚至升级到angular 1.4.5,但这也没用。任何帮助都将不胜感激。我还使用$timeout来确保在检查表单之前表单已完全加载
这是一个plunkr,它显示一个普通的输入元素没有添加到表单中。您可以使用console.log查看完整表单或填写数字部分,然后单击保存。然后将所有附加到表单作用域的元素添加到底部的数组中。希望这有帮助。
我们弄清楚发生了什么事。我们最终使用ng forms指令创建了两个不同的命名表单,一个主表单和一个次表单。在此之后,第二个表单允许我们处理客户端表单输入错误 我们知道发生了什么。我们最终使用ng forms指令创建了两个不同的命名表单,一个主表单和一个次表单。在此之后,第二个表单允许我们处理客户端表单输入错误 你能提供示例plunkr吗?什么样的标准输入?如果你不能创建一个JSFIDLE或plunkr/添加一个可以进行比较的元素模板。完成后,我将开始处理plunkr并发布。标准输入是和日期选择器。你能提供示例plunkr吗?什么样的标准输入?如果你不能创建一个JSFIDLE或plunkr/添加一个可以进行比较的元素模板。完成后,我将开始处理plunkr并发布。标准输入类似于和日期选择器。
return {
restrict: 'E',
link: function(scope , iElement, iAttrs) {
var display = iAttrs.data;
$http.get('views/templates/tripTemplates/' + display, {cache: $templateCache}).success(function(tplContent){
iElement.replaceWith($compile(tplContent)(scope));
});
}
}
<input type="number" class="form-control" step="any" min="{{field.MinValue}}"
name="{{field.FieldId}}" max="{{field.MaxValue}}"
ng-required="{{field.Required}}" ng-model="Trip[field.FieldId]"
ng-change="makeDirty(field.FieldId); setDirty(field);" ng-disabled="locked == true">
<form name="trip_form_constraints.trip" role="form" class="form-validation" data-ng-submit="save(Trip)">
<div class="panel-body" style="margin-bottom:9px;">
<div class="form-group">
<div class="row" ng-repeat="row in Rows">
<div ng-repeat="field in row">
<div class="col-sm-3 col-md-{{field.Width}} col-lg-{{field.Width}}" style="padding-bottom:7px;">
<label tabindex="-1">{{field.Label}}</label>
<div>
<display-element data="{{field.Template}}"></display-element>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<input type="submit" class="btn btn-w-md btn-gap-v btn-success" value="Save" ng-disabled="tripSaveDisabled" ng-if="Locked == false"/>
<div ng-if="Form.Name == 'Charter Ticket'">
<a tabindex="-1" href="" data-tooltip="If there is no catch to add, proceed to submitting this trip." data-tooltip-placement="right" data-tooltip-append-to-body="true">Is this a trip with no catch?</a>
</div>
</div>
</form>
<ui-select ng-model="Trip[field.FieldId]" name="{{field.FieldId}}" theme="bootstrap" ng-required="{{field.Required}}" ng-if="field.Data.length > 1 && field.ParentFieldId != 0" ng-change="makeDirty(field.FieldId)" ng-disabled="locked == true">
<ui-select-match allow-clear="true">{{$select.selected.Name}}</ui-select-match>
<ui-select-choices repeat="data.Id as data in field.Data | filter: $select.search | filter: filterByParent(field.ParentFieldId)">
<div ng-bind-html="data.Name | highlight:$select.search"></div>
</ui-select-choices>
</ui-select>