Advertisement
Rizwanul-XYZ

Go to next steps using AngularJS

Feb 28th, 2017
88
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ####Go to next steps using AngularJS####
  2.  
  3. First write the controller part:
  4.  
  5. galleryApp.controller('rizCtrl', ['$scope', function($scope, $http) {
  6.  
  7.  
  8.    //Current step and previous step action
  9.             $scope.currentStep = 1;
  10.             $scope.previousStep = 0;
  11.  
  12.         $scope.setStep = function(step) {
  13.                 if(step == 1) {
  14.                     $scope.previousStep = 0;
  15.                 }else {
  16.                     $scope.previousStep = $scope.currentStep;
  17.                 }
  18.             $scope.currentStep = step;
  19.  
  20.             }
  21.  
  22. });
  23.  
  24.  
  25. ###Then inside the html (view) do the followings###
  26.  
  27. 1. Take page 2 inside this div and use ng-if to assign the currentStep (for now you can use 1):
  28. <div ng-if="currentStep == 1">
  29.  
  30. 2. Add ng-click inside the button div (Next button)
  31. <div class="button" ng-click="setStep(2)">
  32.  
  33. 3. Take page 4 inside this div and use ng-if to assign the currentStep (for now you can use 2):
  34. <div ng-if="currentStep == 2">
  35.  
  36. 4. For back button use previousStep:
  37. <div class="button" ng-if="previousStep > 0" ng-click="setStep(previousStep)">
  38.  
  39. Thanks!!!
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement