加載ng-repeat中的不同模板，如ui路由器

Question

我想使用ng-include指令在ng-repeat中加載不同的模板。 這是我正在使用的代碼。

HTML：

<li data-ng-repeat="list in checklist"> 
    <a href="" class="label-default" ng-click="loadTemplate(list.name)">{{list.name}}</a> 
    <i class="fa fa-chevron-right"></i> 

    <div ng-if="list.name==listId"> 
    <div data-ng-include src="'heckList/profile1.html'"></div> 
    </div> 
</li> 

和控制器：

$scope.checklist = [ 
      { "id": 1, "name": "Add Profile" }, 
      { "id": 2, "name": "Add Marks" }, 
      { "id": 3, "name": "Add Records" } 
     ]; 
$scope.loadTemplate=(name) => { 
    $scope.listId = name; 
} 

在這裏，我裝上的HREF每次點擊相同的模板。 但是，如果我有多個模板，我想分別根據每個不同的條件加載它們。我怎樣才能實現它？

Answer 1

這是行不通的嗎？

<li data-ng-repeat="list in checklist"> 
    <a href="" class="label-default" ng-click="loadTemplate(list.name)">{{list.name}}</a> 
    <i class="fa fa-chevron-right"></i> 

    <div ng-if="list.name==listId"> 
    <div data-ng-include src="list.template"></div> 

    </div> 
</li> 

$scope.checklist = [ 
    { "id": 1, "template": "template1", "name": "Add Profile" }, 
    { "id": 2, "template": "template2", "name": "Add Marks" }, 
    { "id": 3, "template": "template3", "name": "Add Records" } 
]; 

$ scope.loadTemplate =（名稱）=> { $ scope.listId =名; }

Answer 2

ng-switch在這些情況下真的很不錯。

<div ng-switch="::menuItem.type"> 
    <div ng-switch-when="tickets"> 
     <ng-include /> 
    </div> 
    <div ng-switch-when="social"> 
     <ng-include /> 
    </div> 
    <div ng-switch-when="bracket"> 
     <ng-include /> 
    </div> 
    <div ng-switch-when="schedule"> 
     <ng-include /> 
    </div> 
    <div ng-switch-when="teams"> 
     <ng-include /> 
    </div> 
    <div ng-switch-when="players"> 
     <ng-include /> 
    </div> 
</div> 

ng-switch-when的值是menuItem.type包含的值。