CODEWITHSUNDEEP
angularjshtmlroutesangular-routing
Max
Max

Reputation: 482

Angular JS load view2.html from view1.html

I have a simple angular JS app in which there is a main container html view page, a left menu for navigation between views.

 //Left panel menu links
 <li><a href ng-click="vm.showPanel('View1')">View1</a></li>
 <li><a href ng-click="vm.showPanel('View2')">View2</a></li>
 <li><a href ng-click="vm.showPanel('View3')">View3</a></li>
  //JS function to load view
  vm.showPanel = function (panelName) {

hideAllPanels();

if (panelName == 'View1') {
        vm.isView1Visible = true;
   }
}

The above is working fine, now what I want to do is add a button in View1.html called "Next" which will load next view that is view2.html & so on. Please note both view1.html % view2.html are within a container html page. Can anyone show me what is the angular way of doing this?

Regards

Upvotes: 1

Views: 195

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

Maintain one variable which contains Views html list, like below, and that can be render it by using ng-repeat

Controller

$scope.viewList = ['View1','View2','View3'];

HTML

 <li><a href ng-repeat="view in viewList" ng-click="vm.showPanel(view )">Next</a></li>

More elegant solution would be to re implement you whole show tab and hide tab logic using ui-router or angular-route as it looks like pure SPA thing.

Plunkr for Angular Route

Plunkr for Angular UI-Router

Upvotes: 1

Related Questions