CODEWITHSUNDEEP
angularjs
user1184100
user1184100

Reputation: 6894

NgRepeat on switch case

I'm using angular include to insert the html's in the page and below is the code for it.

RightNav.html

<div ng-switch on="page">
    <div ng-switch-when="Games">
        <div ng-include="'Games.html'"></div>
    </div>  
    <div ng-switch-when="Music">
        <div ng-include="'Music.html'"></div>
    </div>
    <div ng-switch-when="Videos">
        <div ng-include="'Videos.html'"></div>
    </div>
</div>

LeftNav.html

<ul>
  <li ng-repeat="item in items">
      <a href="#" ng-click="selectedItem(item)">{{item.name}}</a>
  </li>
</ul>

JS

app.controller('Nav', function($scope) {
     $scope.items = [
        {
          name : 'Music' 
        },
        {
          name : 'Videos' 
        },
        {
          name : 'Games' 
        }
     ];  
     $scope.page = $scope.items[0].name;
     $scope.selectedItem = function(item) {
        $scope.page = item.name;
     }  
})

I tried using ng-repeat in RightNav.html and it doesn't work what am i doing wrong here?

<div ng-switch on="page">
    <div ng-repeat="item in items">
        <div class="item.name" ng-switch-when="{{item.name}}">
            <div ng-include="'{{item.name}}.html'"></div>
        </div>
    </div>  
</div>

Demo : http://plnkr.co/edit/D1tMRpxVzn51g18Adnp8?p=preview

Upvotes: 1

Views: 656

Answers (1)

Chandermani
Chandermani

Reputation: 42669

In your case you do not need ng-repeat. You can directly bind the expression to ng-include. Also when i tried ng-switch when part does not take expression. Also using the . notation for selected page as the ng-switch and ng-include creates new scope.

See my fiddle

http://plnkr.co/edit/dPILzsyFoWHfL3Urlso2?p=preview

Upvotes: 1

Related Questions