0

I've been trying to learn AngularJS. It's going well, but there are things I am confused about. The problem I am trying to solve is a nested table with expand/collapse functionality. I need to see if I am approaching the problem the right way:

http://jsfiddle.net/jeffreyTang/3bud8/13/

These are my questions:

1.) How should I layout the template and accompanying model? If there is a hierarchy of groupings, should I just have one model that represents the state of the UI? Or should each grouping have it's own model? I started with AngularJS' ng-show and ng-hide, but I wasn't able to make it work with multiple levels.

<tr>
    <td ng-model="topic" class="topic"><i ng-click="expandOrCollapse()" class="icon-minus"></i>Topic</td>
    <td>thing</td>
    <td>thing</td>
</tr>

2.) Currently, my controller modifies the model on any click events and my directives actually manipulate the DOM. It is my understanding that this is how you should separate these things in angular. My questions is, should I have a different watch for each group? Or is there a way I can abstract out the functionality to handle anything that is clicked?

        scope.$watch('topic.expanded', function(newValue, oldValue) {
            if (!newValue) {
                // do something like (show/hide all children)
            }
        });

Ultimately, what I am trying to do is something like this in angularJS:

http://jordanrodriguez.com/wordpress/wp-content/uploads/2012/04/jquery-nested-accordion.html

Thanks in advance.

4

0 回答 0