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-repeat，但这不起作用我在这里做错了什么？

<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

Ng重复开关盒

1 个答案: