angularjs - 我可以将 ng-switch 与 ng-repeat 一起使用吗?
问题描述
我有一个名为$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 repeat 并手动添加部分,它似乎可以工作。有没有办法使用ng-repeat
with ng-switch
?
解决方案
ng-switch
withng-repeat
不会一一显示每个部分。一种解决方案是filter
像这样在 ng-repeat 中使用:
<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>
检查工作演示:DEMO
推荐阅读
- javascript - 使用 PUG nodejs 和 socket.io 实时发送消息
- json - 如何从同一个json节点中提取多个(随机)值
- postgresql - Posgtresql pgadmin 如何防止访问模式
- apache-spark - 在 python 与 spark-submit 中运行 PySpark 代码
- java - 代理服务器无法将响应发送回客户端
- gitlab - 保留 Gitlab 合并请求受让人历史
- excel - 让用户仅在条件(VBA)下更改选定的选项按钮
- java - 找不到父级:org.sonatype,大气项目
- android - android 7.1.2 上的热点创建
- python - 相同模型出现在冲突模型错误中