[英]Angularjs two way data-binding for form data POST
Using angularjs, I am trying to populate a form dynamically and then submit the forms data via POST to a server. 使用angularjs,我试图动态填充表单,然后通过POST将表单数据提交到服务器。
I created a data variable in my controller (to POST later) 我在控制器中创建了一个数据变量(稍后发布)
$scope.data = {};
Then in my html, to create the elements in the form 然后在我的html中,以表单的形式创建元素
<div ng-repeat="(name, attributes) in fields">
<element myVar="data.{{name}}" name="{{name}}" attributes="{{attributes}}" ></element>
</div>
Where fields looks like 字段看起来像什么
{"agency":{"name_displayed":"Agency","size":"30","tag":"input","type":"text"},"department":{"name_displayed":"Department","size":"30","tag":"input","type":"text"},"description":{"cols":"50","name_displayed":"Description","rows":"4","tag":"textarea"}}
The element directive then looks like this, but is throwing errors 然后,element指令看起来像这样,但是抛出错误
demoApp.directive("element", function() {
var template = function(name, attributes, results) {
var templateString = "<" + attributes.tag;
for (var attribute in attributes) {
if (attribute != "name_displayed" && attribute != "tag" && attribute != "options") {
templateString += " " + attribute + '="' + attributes[attribute] + '"';
}
}
if (attributes.tag == "input") {templateString += ' value="' + results + '"';}
templateString += ' name="' + name + '">';
templateString += ' ng-model="myVar">';
if (attributes.tag == "select") {
for (var i=0; i<attributes.options.length; i++) {
templateString += "<option value=" + attributes.options[i] + ((attributes.options[i] == results)? " selected" : "") + ">" + attributes.options[i] + "</option>";
}
}
if (attributes.tag == "textarea") {
templateString += results;
}
templateString += "</" + attributes.tag + ">";
var toReturn = attributes.name_displayed + ": " + templateString;
return toReturn;
};
return {
restrict: "E",
scope: {
myVar: '='
},
link: function(scope, element, attrs) {
var attributes = angular.fromJson(attrs.attributes);
var tpl = template(attrs.name, attributes, attrs.results);
element.html(tpl);
}
};
});
Without the myVar attribute and scope object in the directive, this works fine (to display the form). 指令中没有myVar属性和scope对象,则可以正常工作(显示表单)。 Am I missing something about the two-way data binding here?
我是否在这里缺少有关双向数据绑定的信息? Or is there a better way to do this?
还是有更好的方法来做到这一点? - Thanks
- 谢谢
It seems strange that you append HTML without compilation. 您在未编译的情况下附加HTML似乎很奇怪。 I would change the
link
first of all: 我首先要更改
link
:
....
link: function(scope, element, attrs) {
var attributes = angular.fromJson(attrs.attributes);
var tpl = template(attrs.name, attributes, attrs.results);
var tpl_compiled = angular.element($compile( tpl )(scope));
element.html(tpl_compiled);
}
...
By this way we tell to angular to do a digest cycle over new appended data. 通过这种方式,我们告诉angular对新的附加数据进行摘要循环。 Maybe this a reason why with isolate scope the
myVar
didn't fired. 也许这就是为什么
myVar
没有被隔离的原因。
Hope it will help, 希望能有所帮助,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.