CODEWITHSUNDEEP
angularjs
Riz
Riz

Reputation: 6676

trying to use ngSwitch in angular

I'm testing the following code in angular and it's not working. I'm very new to Angular and I've been unable to figure this out. All I'm trying to do is show a particular element based on a step number when next/back buttons are clicked.

  <div ng-app ng-controller="Ctrl">
    <div ng-switch on="selection" >
        <div ng-switch-when="2" step-number="2">Settings Div</div>
        <span ng-switch-when="1" step-number="1">Home Span</span>
        <span ng-switch-default step-number="3">default</span>
        <button ng-click="back(step-number)">back</button>
        <button ng-click="forward(step-number)">forward</button>
    </div>   
 </div>

function Ctrl($scope) {
    $scope.items = ['1', '2', '3'];
    $scope.forward = function($selected) { $scope.selection = $scope.items[$selected - 1]; };
    $scope.back = function($selected) { $scope.selection = $scope.items[$selected - 1]; };
}

Upvotes: 1

Views: 1619

Answers (2)

Mark Rajcok
Mark Rajcok

Reputation: 364697

I'm not sure what you are trying to do with step-number, but here is a way to make your buttons work between the values of 1 and 3 inclusive:

<div ng-switch on="selection">
    <div ng-switch-when="2">Settings Div</div> 
    <span ng-switch-when="1">Home Span</span>
    <span ng-switch-default step-number="3">default</span>
    <button ng-click="back()">back</button>
    <button ng-click="forward()">forward</button>
</div>


function MyCtrl($scope) {
    $scope.selection = 3;
    $scope.forward = function () {
        $scope.selection += 1;
        if ($scope.selection > 3) $scope.selection = 3;
        console.log($scope.selection);
    };
    $scope.back = function () {
        $scope.selection -= 1;
        if ($scope.selection < 1) $scope.selection = 1;
        console.log($scope.selection);
    };
}

fiddle

Upvotes: 0

lucuma
lucuma

Reputation: 18339

I think I would refactor what you are doing to the following:

Demo: http://plnkr.co/edit/b7mQ5ssSqECDUhvN0S2b?p=preview (click back first).

app.controller('Ctrl', function($scope) {
      $scope.name = 'World';
   $scope.selection = 2;
    $scope.items = ['div 1', 'div 2', 'div 3'];
    $scope.forward = function() { 
      if ($scope.selection==$scope.items.length-1) $scope.selection=0;
      else $scope.selection++;
      };
    $scope.back = function() { 
      if ($scope.selection==0) $scope.selection = $scope.items.length-1;
      else $scope.selection --; 
      };

    });

<body ng-controller="Ctrl">
 <div >
    <div>
        <div>{{items[selection]}}</div>
        <button ng-click="back()">back</button>
        <button ng-click="forward()">forward</button>
    </div>   
 </div>


</body>

Upvotes: 1

Related Questions