像ui路由器一样在ng-repeat中加载不同的模板答案

【问题标题】：Load different templates in ng-repeat like ui router像ui路由器一样在ng-repeat中加载不同的模板
【发布时间】：2016-06-16 22:01:00
【问题描述】：

我想使用 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 时加载相同的模板。但是，如果我有多个模板，我想根据每个不同的条件分别加载它们。我怎样才能实现它？

【问题讨论】：

您要加载的这些“模板”有多大？像一个 HTML 标签？你的意思是你只想根据list对象改变data-ng-include div的src属性？
您不能将 Url 添加到清单中并像 list.url 一样将其加载到您的 ng-repeat 中吗？
是否可以不在控制器中添加模板名称..

标签： javascript angularjs angularjs-ng-repeat

【解决方案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 = 名称； }

【讨论】：