javascript - AngularJS ng-switch-when expression - Stack Overflow

admin管理员组

文章数量:1392081

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?

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?

• javascript
• angularjs

Share Improve this question Follow asked Apr 30, 2013 at 23:42 Lucas RainesLucas Raines 1,31533 gold badges1515 silver badges2424 bronze badges 8

• 1 in your "ng-switch", where is "stream" ing from? i see "selection" defined in your controller, but "stream" isn't defined until the "ng-repeat" as far as i can tell. – 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 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 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 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 Commented May 1, 2013 at 0:11

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 3

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

http://jsbin./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>

本文标签： javascriptAngularJS ngswitchwhen expressionStack Overflow