I am currently working on creating a tabbed menu using the ng-switch directive.
Within my Ctrl (streams), I have set the tabs and am keeping track of the selected one as selection:
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];
}
};
});
In my view (index.html), I am using ng-repeat to create a container for each tab:
<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>
The issue I am facing is with the ng-switch-when statement, as it does not accept an expression.
If I could use
ng-switch-when="{{stream.title}}"ng-switch="selection.title" and resolve the issue.
How can I structure an ng-switch expression to match a dynamically generated list?