NgRepeat切換案例

Question

我使用angular include在頁面中插入html，下面是它的代碼。

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; 
    } 
}) 

我試着在RightNav.html採用NG-重複，它不工作我是什麼我在這裏做錯了嗎？

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

演示：http://plnkr.co/edit/D1tMRpxVzn51g18Adnp8?p=preview

Answer 1

你的情況，你不需要ng-repeat。您可以直接將表達式綁定到ng-include。另外當我試圖ng-switch時，部分不表達。 ng-switch和ng-include也使用所選頁面的.表示法創建新範圍。

見我的小提琴

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