我可以将ng-switch与ng-repeat一起使用吗?

Question

我有一个名为$scope.sectionList的数组：

0: {id: "1", section_name: "About me (in detail)"}
1: {id: "2", section_name: "About me (single word)"}
2: {id: "3", section_name: "My freaky side (in detail)"}
3: {id: "4", section_name: "My freaky side (single word)"}
4: {id: "5", section_name: "Embarrassing (in detail)"}
5: {id: "6", section_name: "Embarrassing (single word)"}

我想使用 ng-switch 逐个显示每个部分。这是我尝试过的：

<div ng-switch="myVar">
<div ng-repeat="section in sectionList" ng-switch-when='{{section.id}}' class="animate-switch-container">
<div class="col-md-12 grid-margin stretch-card" >
<div class="card">
<div class="card-body" >
<h4 class="card-title">{{section.section_name}} {{section.id}}</h4>
<button type="button" class="btn btn-primary" ng-click="next(section.id)">Start</button>
</div>
</div>
</div>
</div>
<div ng-switch-default>
<h1>Switch to next section</h1>
<button type="button" class="btn btn-primary" ng-click="next(1)">Start</button>
</div>
</div>

然后next()函数：

$scope.myVar = '';
$scope.next = function (myVar) {
$scope.myVar = myVar;
}; 

但这似乎不太有效。如果我删除ng重复并手动添加部分，它似乎可以工作。有没有办法将ng-repeat与ng-switch一起使用？

Answer 1

带有ng-repeat的ng-switch不会逐个显示每个部分。一种解决方案是在ng-repeat中使用filter，如下所示：

<div ng-repeat="section in sectionList | filter: {id: myVar}" class="animate-switch-container">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">{{section.section_name}} {{section.id}}</h4>
<button type="button" class="btn btn-primary" ng-click="next(section.id)">Start</button>
</div>
</div>
</div>
</div>

检查工作演示：演示