以下是具有自定义指令的HTML代码。
<div id="habits" style="margin-top: 70px; margin-left: 23px" ng-controller="contl as ctrll">
<content-item ng-repeat="item in ctrll.content" content="item">
</content-item>
<div ng-repeat="item in ctrll.content" content="item" ng-if ="item.onSelection">
<div ng-repeat="onSelection in item.onSelection">
<higi-text-field-new field="registerModal.fields[20]">{{onSelection.title}}<br />
{{onSelection.type}}
</higi-text-field-new>
</div>
</div>
</div>
content-item指令具有以下模板(一个复选框和其各自的标签)。我需要检索使用getElementById()动态创建的复选框ID,以检查是否已选中复选框,然后创建文本框
<div style='margin-top:70px,margin-left:50px'>
<label class='containerr'>
<input type='checkbox' id = '{{content.title}}'>
<span class='checkmarkk'>
</span>
</label>
<div id='mytitle' style='margin-left:30px'>{{content.titles}}
</div>
</div>
</div>
到目前为止,我尝试将html代码转换为JSON,以便我可以检索复选框ID,但是JSON数据很大,我不确定如何继续获取复选框ID。目的是在选择特定习惯(复选框)的情况下显示文本框
var initElement = document.getElementById("perhiscontainer")
var json = mapDOM(initElement, true);
console.log(json);
function mapDOM(element, json) {
var treeObject = {};
// If string convert to document Node
if (typeof element === "string") {
if (window.DOMParser) {
parser = new DOMParser();
docNode = parser.parseFromString(element,"text/xml");
} else { // Microsoft strikes again
docNode = new ActiveXObject("Microsoft.XMLDOM");
docNode.async = false;
docNode.loadXML(element);
}
element = docNode.firstChild;
}
//Recursively loop through DOM elements and assign properties to object
function treeHTML(element, object) {
object["type"] = element.nodeName;
var nodeList = element.childNodes;
if (nodeList != null) {
if (nodeList.length) {
object["content"] = [];
for (var i = 0; i < nodeList.length; i++) {
if (nodeList[i].nodeType == 3) {
object["content"].push(nodeList[i].nodeValue);
} else {
object["content"].push({});
treeHTML(nodeList[i], object["content"][object["content"].length -1]);
}
}
}
}
if (element.attributes != null) {
if (element.attributes.length) {
object["attributes"] = {};
for (var i = 0; i < element.attributes.length; i++) {
object["attributes"][element.attributes[i].nodeName] = element.attributes[i].nodeValue;
}
}
}
}
treeHTML(element, treeObject);
return (json) ? JSON.stringify(treeObject) : treeObject;
}
JSON输出
"type":"DIV","content":["\n ",{"type":"#comment"},{"type":"CONTENT-ITEM","content":[{"type":"DIV","content":[{"type":"LABEL","content":[{"type":"INPUT","attributes":{"type":"checkbox","id":"Tobacco Chewing"}},{"type":"SPAN","attributes":{"class":"checkmarkk"}}],"attributes":{"class":"containerr"}},{"type":"DIV","content":["Tobacco Chewing"],"attributes":{"id":"personalhis_title","style":"margin-left:30px","class":"ng-binding"}}],"attributes":{"id":"Tobacco Chewing","style":"margin-top:70px,margin-left:50px","class":"ng-scope"}}],"attributes":{"ng-repeat":"item in ctrll.content","content":"item","class":"ng-scope ng-isolate-scope"}},{"type":"#comment"},{"type":"CONTENT-ITEM","content":[{"type":"DIV","content":[{"type":"LABEL","content":[{"type":"INPUT","attributes":{"type":"checkbox","id":"Smoking"}},{"type":"SPAN","attributes":{"class":"checkmarkk"}}],"attributes":{"class":"containerr"}},{"type":"DIV","content":["Smoking"],"attributes":{"id":"personalhis_title","style":"margin-left:30px","class":"ng-binding"}}],"attributes":{"id":"Smoking","style":"margin-top:70px,margin-left:50px","class":"ng-scope"}}],"attributes":{"ng-repeat":"item in ctrll.content","content":"item","class":"ng-scope ng-isolate-scope"}},{"type":"#comment"},{"type":"CONTENT-ITEM","content":[{"type":"DIV","content":[{"type":"LABEL","content":[{"type":"INPUT","attributes":{"type":"checkbox","id":"Alcohol"}},{"type":"SPAN","attributes":{"class":"checkmarkk"}}],"attributes":{"class":"containerr"}},{"type":"DIV","content":["Alcohol"],"attributes":{"id":"personalhis_title","style":"margin-left:30px","class":"ng-binding"}}],"attributes":{"id":"Alcohol","style":"margin-top:70px,margin-left:50px","class":"ng-scope"}}],"attributes":{"ng-repeat":"item in ctrll.content","content":"item","class":"ng-scope ng-isolate-scope"}},{"type":"#comment"},{"type":"CONTENT-ITEM","content":[{"type":"DIV","content":[{"type":"LABEL","content":[{"type":"INPUT","attributes":{"type":"checkbox","id":"Bowel"}},{"type":"SPAN","attributes":{"class":"checkmarkk"}}],"attributes":{"class":"containerr"}},