我正在尝试使用 ng-switch
组合一种选项卡式菜单。
我在 Ctrl(流)中设置选项卡并跟踪当前选定的选项:
app.controller("StreamCtrl", function($scope) {
$scope.streams = [{
title: 'latest',
icon: 'time',
data: "Hi, I'm data."
}, {
title: 'popular',
icon: 'fire',
data: "Hi, I'm data too!"
}];
$scope.selection = $scope.streams[0];
$scope.getCurrentStreamIndex = function(){
// Get the index of the current stream given selection
return $scope.streams.indexOf($scope.selection);
};
// Go to a defined stream index
$scope.goToStream = function(index) {
if($scope.streams[index]) {
$scope.selection = $scope.streams[index];
}
};
});
在我看来(index.html),我使用 ng-repeat 为每个选项卡创建一个容器:
<section class="streams" ng-controller="StreamCtrl" ng-switch="stream.title == selection.title">
<section class="stream" ng-switch-when="true" ng-repeat="stream in streams">
{{stream.title}}
<div class="loaderContainer"><div class="loader"></div></div>
</section>
</section>
我遇到的问题是我的 ng-switch-when 语句,因为它不接受表达式。
如果我可以设置 ng-switch-when="{{stream.title}}"
那么我相信我可以使用 ng-switch="selection.title"
一切都会好起来的。
如何构建 ng-switch
表达式来匹配动态生成的列表?
最佳答案
好的,看看这个,我认为它应该足以让您继续前进:
http://jsbin.com/okukey/1/edit
新的 html:
<div ng-controller="StreamCtrl">
<section class="streams" ng-repeat="stream in streams">
<section class="stream">
{{stream.title}}
<div class="loaderContainer" ng-show="stream == selection"><div class="loader">SELECTED</div>
</section>
</section>
</div>
关于javascript - AngularJS ng-switch-when 表达式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16310684/