How to create nested input fields with angularJS

Question

I want to create a form dynamically which contains inputs etc.... This code below shows what I mean!

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>

How can I add nodes("Division" &"GrainContenu") infinitely and dynamically in this tree? I tried with this http://jsfiddle.net/brendanowen/uXbn6/8/ , but I don't know how to add html inputs.

floribon · Accepted Answer · 2015-04-21 01:40:03Z

1

You can simply edit the node template and add an input in there:

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>

Update: better looking with sibling/children here: http://jsfiddle.net/taxr14jr/2/

edited Apr 21, 2015 at 1:40

answered Apr 21, 2015 at 1:27

floribon

19.2k5 gold badges56 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create nested input fields with angularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related