Angularjs 尝试在angular中使用ngSwitch

我正在angular中测试以下代码，但它不起作用。我对Angular很陌生，但我一直无法理解这一点。我所要做的就是在单击next/back按钮时根据步骤号显示特定元素

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

设置组
主跨度
违约
返回
向前地
函数Ctrl（$scope）{
$scope.items=['1'，'2'，'3']；
$scope.forward=函数（$selected）{$scope.selection=$scope.items[$selected-1]；}；
$scope.back=函数（$selected）{$scope.selection=$scope.items[$selected-1]；}；
}

我想我应该重构您对以下内容所做的操作：

演示：（先单击后退）

app.controller（'Ctrl'，函数（$scope）{
$scope.name='World'；
$scope.selection=2；
$scope.items=['div 1'，'div 2'，'div 3']；
$scope.forward=函数（）{
如果（$scope.selection==$scope.items.length-1）$scope.selection=0；
else$scope.selection++；
};
$scope.back=函数（）{
如果（$scope.selection==0）$scope.selection=$scope.items.length-1；
else$scope.selection--；
};
});
{{items[selection]}
返回
向前地

我想我应该重构您对以下内容所做的操作：

演示：（先单击后退）

app.controller（'Ctrl'，函数（$scope）{
$scope.name='World'；
$scope.selection=2；
$scope.items=['div 1'，'div 2'，'div 3']；
$scope.forward=函数（）{
如果（$scope.selection==$scope.items.length-1）$scope.selection=0；
else$scope.selection++；
};
$scope.back=函数（）{
如果（$scope.selection==0）$scope.selection=$scope.items.length-1；
else$scope.selection--；
};
});
{{items[selection]}
返回
向前地

我不确定您想用步骤号做什么，但这里有一种方法可以让您的按钮在1和3（包括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>

设置组
主跨度
违约
返回
向前地

函数MyCtrl（$scope）{
$scope.selection=3；
$scope.forward=函数（）{
$scope.selection+=1；
如果（$scope.selection>3）$scope.selection=3；
log（$scope.selection）；
};
$scope.back=函数（）{
$scope.selection-=1；
如果（$scope.selection<1）$scope.selection=1；
log（$scope.selection）；
};
}

---

我不确定您想用

步骤编号做什么，但这里有一种方法可以让您的按钮在1和3（包括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>


设置组
主跨度
违约
返回
向前地


函数MyCtrl（$scope）{
$scope.selection=3；
$scope.forward=函数（）{
$scope.selection+=1；
如果（$scope.selection>3）$scope.selection=3；
log（$scope.selection）；
};
$scope.back=函数（）{
$scope.selection-=1；
如果（$scope.selection<1）$scope.selection=1；
log（$scope.selection）；
};
}

Add
console.log（“$selected=”，$selected）到您的
前进
或
后退
方法。这应该会给你一个线索（当我写答案的时候）。我用的是alert，它总是0。我想知道它是否将步骤号绑定到$selected！添加
console.log（“$selected=”，$selected）到您的
前进
或
后退
方法。这应该会给你一个线索（当我写答案的时候）。我用的是alert，它总是0。我想知道它是否将步骤号绑定到$selected！谢谢你的工作。但是，如果我确实想从所选项目属性传入一个参数，我将如何做？您可以执行
back（selection）
，但是您已经将其作为范围变量。通常，如果您在循环中并且想要处理该元素，那么您将传入一个变量。无论如何，我对其进行了更新，以允许前向/后向返回到0，长度为1的位置。我在plunkr中添加了一个测试函数，其中包含一个关于选择的警报，以便您可以看到它。我的意思是，如果我想从表单元素中获取一些属性并将其作为参数传递，您需要将其作为字符串或使用范围变量传递。。除非你建立了一个指令，否则你试图做的事情是行不通的。谢谢，这是行不通的。但是，如果我确实想从所选项目属性传入一个参数，我将如何做？您可以执行
back（selection）
，但是您已经将其作为范围变量。通常，如果您在循环中并且想要处理该元素，那么您将传入一个变量。无论如何，我对其进行了更新，以允许前向/后向返回到0，长度为1的位置。我在plunkr中添加了一个测试函数，其中包含一个关于选择的警报，以便您可以看到它。我的意思是，如果我想从表单元素中获取一些属性并将其作为参数传递，您需要将其作为字符串或使用范围变量传递。。除非您构建一个指令，否则您试图做的事情不会起作用。
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);
    };
}