显示文本框onClicking复选框(自定义指令)-Angular JS

时间:2018-12-11 11:00:51

标签: javascript html angularjs json angularjs-directive

以下是具有自定义指令的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"}},

0 个答案:

没有答案