AngularJS : Appending the same structure on the click of each item

问题

My index.html page is like following:

<div id="sidepanel" ng-controller="myCtrl">
<ul class="drop-down">
    <li ng-repeat="item in items">
        <a href="#">{{item.name}}</a>
    </li>
</ul>
</div>
<div id="mainpanel" ng-controller="listCtrl">
    <div ng-view></div>
</div>

For this ng-view I have record-list.html to show all the records which is like following:

<div class="container">
    <ul class="design">
        <li id="{{record.name}}" ng-repeat="record in records">
            <div>......</div>
        </li>
    </ul>
</div>

Now i want to add the same structure (as like each record) append on the click of each item of the side panel.

what is the logic for that ?

My recent UI Looks like this & i want to add the same structure on each click which should be append the existing structure.

Please Help.Thanks.

回答1:

It sounds like perhaps each "record" has a set of children "records." If this is the case, I would recommend using angular's ng-switch directive to conditionally display the correct (or no) set of sub-records on the side.

来源：https://stackoverflow.com/questions/16141559/angularjs-appending-the-same-structure-on-the-click-of-each-item