Angular Next and Previous button

Question

I'm trying to create next and previous buttons for my application.

The pages all use one controller. I'm new to angular, is there any advice on how can I provide navigation for a user to click either forward or backwards through the pages in the controller?

  $routeProvider.
  
    when("/", {

	templateUrl: "partials/home.html", 
	controller: "PageCtrl"}).
	
	when("/c1", {
		templateUrl: "categories/category1.html", 
		controller: "PageCtrl"})
		
	 .when("/category2", {
		 templateUrl: "categories/category2.html", 
		 controller: "PageCtrl"}) 	 
		 
	  .when("/category3", {
	  		templateUrl: "categories/category3.html", 
	  		controller: "PageCtrl"})

	  .when("/category4", {
	  	templateUrl: "categories/category4.html", 
	  	controller: "PageCtrl"})

	  .when("/category5", {
	  	templateUrl: "categories/category5.html", 
	  	controller: "PageCtrl"})

	  .when("/category6", {
	  	templateUrl: "categories/category6.html", 
	  	controller: "PageCtrl"})

	  .when("/category7", {
	  	templateUrl: "categories/category7.html", 
	  	controller: "PageCtrl"})

	  .when("/category8", {
	  	templateUrl: "categories/category8.html", 
	  	controller: "PageCtrl"})

	  .when("/category9", {
	  	templateUrl: "categories/category9.html", 
	  	controller: "PageCtrl"})

danday74 · Accepted Answer · 2016-01-12 11:12:06Z

1

You could add an array to $rootScope with the names of your routes. e.g.

$rootScope.routeNames = ['/category7','/category8']

Then reference the array in your $routeProvider

Then a function will determine the next route based on the current route.

The next button on each page will reference the function to determine the link for the next page.

Alternatively, you could rename your routes as r1, r2, etc then the next route will be easily determined for the next link.

answered Jan 12, 2016 at 11:12

danday74

58k56 gold badges273 silver badges337 bronze badges

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

Comments

AndreaM16 · Accepted Answer · 2016-01-12 14:39:54Z

0

If you want to ruote through your views when clicking on a button, you just need to define a button as follows:

myFile.html

<button class="myBtn" type="submit" ng-href="#c1"> 
</button>

You just need to use ng-href= "#whereYouWantToGo". You can get rid off # If you really wish, check some answers about it in SO.

Of course, in this way you would be able to define two buttons per each view, one to go back and one to go on. You also should be able to identify these two buttons with two unique ids or names, including them in the pages where you need them and just pass a different path to ng-ref using ng-include or similar, and, you also should be able to keep one CSS class per button type.

I hope I've been helpful.

edited Jan 12, 2016 at 14:39

answered Jan 12, 2016 at 10:55

AndreaM16

4,0055 gold badges37 silver badges78 bronze badges

Collectives™ on Stack Overflow

Angular Next and Previous button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related