Question

我想创建一个动态包含输入等的表单.... 这段代码显示我的意思！

的index.html

<html>
<body>
    <ul>
        <li>
            <h2>Division</h2>
            Titre<input type="text">
            <br />Titre court
            <input type="text"><br />
            <ul>
                <li>
                    <h2>Division</h2>
                    Titre<input type="text">
                    <br />Titre court
                    <input type="text"> 
                    <ul>                
                        <li>
                            <h2>Division</h2>
                            Titre<input type="text">
                            <br />Titre court
                            <input type="text">
                        </li>
                        <li>                        
                            <h3>Grain de Contenu</h3>
                            Titre<input type="text"><br />
                            Titre court<input type="text"><br />
                            <h4>Information</h4>
                            Titre<input type="text"><br />
                            <textarea rows="4" cols="50"></textarea><br />                      
                        </li>
                    </ul>
                </li>
                <li>
                <h3>Grain de Contenu</h3>
                            Titre<input type="text"><br />
                            Titre court<input type="text"><br />
                            <h4>Information</h4>
                            Titre<input type="text"><br />
                            <textarea rows="4" cols="50"></textarea><br />
                        </li>       
                </li>
            </ul>
        </li>
       <li>
            <h2>Division</h2>
            Titre<input type="text">
            <br />Titre court
            <input type="text"><br />
            <ul>
                <li>
                    <ul>
                        <h2>Division</h2>
                        Titre<input type="text">
                        <br />Titre court
                        <input type="text">                     
                        <li>
                            <h2>Division</h2>
                            Titre<input type="text">
                            <br />Titre court
                            <input type="text">
                        </li>
                        <li>                        
                            <h3>Grain de Contenu</h3>
                            Titre<input type="text"><br />
                            Titre court<input type="text"><br />
                            <h4>Information</h4>
                            Titre<input type="text"><br />
                            <textarea rows="4" cols="50"></textarea><br />                      
                        </li>
                    </ul>
                    <ul>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

如何在此树中无限动态地添加节点（＆＃34; Division＆＃34;＆amp;＆＃34; GrainContenu＆＃34;）！我试过这个http://jsfiddle.net/brendanowen/uXbn6/8/，但我不知道如何添加html输入。

Answer 1

您只需编辑节点模板并在其中添加输入：

http://jsfiddle.net/taxr14jr/

<script type="text/ng-template"  id="tree_item_renderer.html">
  {{data.name}}
  <button ng-click="add(data)">Add node</button>
  <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
  <!-- Here -->
  <div><input type="text" /></div>
  <ul><li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li></ul>
</script>

更新：更好地了解兄弟姐妹/孩子：http://jsfiddle.net/taxr14jr/2/

如何使用angularJS创建嵌套输入字段

1 个答案: