can we have nested div ng-view in AngularJs?

Question

I have specific requirement to binding view dynamically. By default the module have only one month-data 1-Mat-16 to 30-May-2016. Once user scroll the page it should fetch previous month and so on..

I want to bind the data in following structure. how can we achieve in AngularJS. Can I have nested ng-view which give me month-wise html code or can we achieve in single view.

I want to generate every month dynamically and bind in same div.

<div class="content" id="mainContent" style="width: 100% !important">
    <div id="5-2016" class="Month">
        <ul class="BasicsUl" id="2016-5">
            <li id="2016-05-01" style="width: 3.135484%;"></li>
            <li id="2016-05-02" style="width: 3.135484%;"></li>
            <li id="2016-05-031" style="width: 3.135484%;"></li>
            <li id="2016-05-04" style="width: 3.135484%;"></li>
            ....
        </ul>
    </div>
     <div id="4-2016" class="Month">
        <ul class="BasicsUl" id="2016-4">
            <li id="2016-04-01" style="width: 3.135484%;"></li>
            <li id="2016-04-02" style="width: 3.135484%;"></li>
            <li id="2016-04-03" style="width: 3.135484%;"></li>
            <li id="2016-04-04" style="width: 3.135484%;"></li>
            ....

        </ul>
    </div>
    ....
</div>

I want to know the template-design like this:

<div style="width: 100%">
    <div ng-repeat="activity in activities.data | limitTo:20:1">
        <div id="4-2016" class="Month">
            <ul class="BasicsUl" id="2016-4">
                <li id="2016-04-01" style="width: 3.135484%;"></li>
            </ul>

        </div>
    </div>
</div>

I want to know the template-design like this: <div style="width: 100%"> <div ng-repeat="activity in activities.data | limitTo:20:1"> <ul class="BasicsUl" id="2016-4"> <li id="2016-04-01" style="width: 3.135484%;"></li> — Chirag Kavathiya
– Chirag Kavathiya, Commented May 5, 2016 at 11:53

Eugene Hype · Accepted Answer · 2016-05-05 11:59:44Z

1

You should try to use ui-router for routing. It became a de-facto solution for angular 1.x routing.

https://github.com/angular-ui/ui-router

answered May 5, 2016 at 11:59

Eugene Hype

675 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 10:28:11Z

0

For this implementation take a look at ui-router

This includes the use of having multiple and / or nested views.

For more details take a look on this

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered May 5, 2016 at 11:44

92sharmasaurabh

16611 bronze badges

Collectives™ on Stack Overflow

can we have nested div ng-view in AngularJs?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related