Question

我正在以角度测试以下代码并且它无法正常工作。我对Angular很新，我一直无法弄清楚这一点。我所要做的就是在点击下一个/后退按钮时根据步骤编号显示一个特定的元素。

  <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]; };
}

Answer 1

我想我会重构你正在做的事情：

演示：http://plnkr.co/edit/b7mQ5ssSqECDUhvN0S2b?p=preview（先点击返回）。

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>

Answer 2

我不确定你要对step-number做什么，但是这里有一种方法可以让你的按钮在1到3的值之间工作：

<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

试图在角度使用ngSwitch

2 个答案: