ng-view for multiple form load in single page application

Question

I am trying to load different form based on user interaction in single page application. ng-view was helpful until i had to load/hide forms in different divs of same page.

div#1: it will have catalog names populated from ng-repeat.
div#2: should populate forms ( order / schedule / list ) based on button click from top nav.
div#3: should only populate sub catalog list when user selects catalog in div#1.

index.html

<div class="left_column">
    <ul>
    <li ng-repeat="catalog in catalogs">{{ catalog }}</li>
</ul>
</div>    
<div class="top_row">
    <ng-view></ng-view>
</div>  
<div class="bottom_row">
    <ng-view></ng-view>
</div>

app.js

myApp.config(function($routeProvider){

    $routeProvider
        .when('/orderForm', { 
            templateUrl: '/orderForm.html',
            controller: 'orderFormController'
        })
        .when('/scheduleForm', { 
            templateUrl: '/views/html/parameterForm.html',
            controller: 'parameterFormController'
        })
        .when('/subCataloglist', { 
            templateUrl: '/subCataloglist.html',
            controller: 'subController'
        })
});

How can i load different forms at a time in single page ? is there any better example for multi view logic ?

Have you considered [ng-include](https://docs.angularjs.org/api/ng/directive/ngInclude) to load in a different partial view for div#2 and div#3? — sudo, Feb 15 '16 at 23:51
You may be better off using ui-router for something like this. It is a much better approach. — Lansana Camara, Feb 16 '16 at 00:16

score 1 · Answer 1 · answered Feb 16 '16 at 02:05

I think that this attempt isn't correct. I have seen only one ng-view, which could change class attached according to view url. But here i propose much simpler architecture. Use one view. On this view do ng-repeat in div1 as it was. in div2 do a ng-if statement and connect it with clicking on buttons. div three simillar - you can use ng-show or ng-if. ng-if doesn't render in dom, ng-show renders but hide.

<div class="top_row">
    <form id="form1" ng-if="selval=1">
    </form>
    <form id="form2" ng-if="selval=2">
    </form>
</div>

menu:

<ul>
    <li><a href="javascript:void(0)" ng-click="sel(1)">order</a></li>
    <li><a href="javascript:void(0)" ng-click="sel(2)">schedule</a></li>

controller attached to current html view:

$scope.sel = function(n){
    $scope.selval = n;
}

As two-way binding is implemented in angular, it will work automatically.

ng-view for multiple form load in single page application

1 Answers1