1

我正在以角度测试以下代码，但它不起作用。我对 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]; };
}
4

2 回答 2

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>
于 2013-05-10T21:47:04.317 回答
0

我不确定你要做什么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);
    };
}

小提琴

于 2013-05-10T21:52:05.557 回答