AngularJS:动态地将局部视图加载到页面中

Question

创建我的第一个AngularJS应用程序.

一个ng-repeat:er加载标题.每个标题都是可点击的.单击标题时,ajax调用会获得更多JSON数据.我需要在点击的标题下面添加这些数据.

通常的方式,我会将HTML创建为字符串并将其附加到源代码中.但是因为我正在使用AngularJS,所以应该有一种方法可以创建一个包含HTML和另一个ng-repeat的局部视图.

如何才能做到这一点？

Answer 1

这是一个小示例：您的 JSON 结构简单，每个项目的 json 对象中都有 subItems 数组。

JS：

function MyCtrl($scope, $http) {
  $scope.items = [ {id: 'a', subItems: []}, {id: 'b', subItems: []} ];

  $scope.getSubItems = function(item) {
    $http.get('/sub-items/' + item.id).then(function(response) {
      //Append the response to the current list of subitems 
      //(incase some exist already)
      item.subItems = item.subItems.concat(repsonse.data);
    });
  };
}

HTML：

<div ng-repeat="item in items">

  <a ng-click="getSubItems(item)">{{item.id}}</div>
  <div ng-show="item.subItems.length">
    <h4>SubItems:</h4>
    <ul>
      <li ng-repeat="subItem in item.subItems">{{subItem}}</li>
    </ul>
  </div>

</div>