AngularJS ng-switch-when expression

Question

I'm trying to put together a sort of tabbed menu using ng-switch.

I set the tabs in my Ctrl (streams) and keep track of the currently 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];
    }
};
});

And in my view (index.html), I use 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 problem I run in to is with my ng-switch-when statement, because it won't accept an expression.

If I could set ng-switch-when="{{stream.title}}" then I believe I could use ng-switch="selection.title" and all would be fine.

How would I structure an ng-switch expression though to match a dynamically generated list?

in your "ng-switch", where is "stream" coming from? i see "selection" defined in your controller, but "stream" isn't defined until the "ng-repeat" as far as i can tell. — Jonah
– Jonah, Commented Apr 30, 2013 at 23:49
I wasn't familiar with when ng-switch evaluates its expression and what scope it gets evaluated in. What you see was a test. I was hoping it would be evaluated within the scope of the ng-switch-when (also the ng-repeat in this case), so stream (from the ng-repeat) might be an available object. — Lucas Raines
– Lucas Raines, Commented Apr 30, 2013 at 23:55
Not 100% sure, but I don't think it works like that. I'd try restructuring with the assumption that "stream" won't be available except inside the ng-repeat statement. — Jonah
– Jonah, Commented May 1, 2013 at 0:03
Yeah, that's the conclusion I came to when testing, which is why I'm having my problem still. That was the last idea I had to get it to work. — Lucas Raines
– Lucas Raines, Commented May 1, 2013 at 0:04
What are you trying to do? Display all the streams in a section tab? And what should be different about the currently selected one? — Jonah
– Jonah, Commented May 1, 2013 at 0:11

Jonah · Accepted Answer · 2013-05-01 00:47:17Z

3

Ok, check out this out, I think it should give you enough to keep going:

http://jsbin.com/okukey/1/edit

New 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>

answered May 1, 2013 at 0:47

Jonah

16.3k23 gold badges94 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lucas Raines Over a year ago

Oh, ok, so you switched out the ng-switch with an ng-show. Yep! That works. Thanks a lot. I figured ng-switch just wasn't going to work and there had to be another way to do it.

Robert Koritnik Over a year ago

@Jonah: A more concise way to replace ng-switch would be to use ng-if instead, because it removes false resulted elements from the DOM, just like ng-switch-when does. ng-show and ng-hide keep elements in DOM manipulating their CSS classes only which means they require more resources. May be insignificant but not always.

Collectives™ on Stack Overflow

AngularJS ng-switch-when expression

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related