AngularJS：动态地将局部视图加载到页面中-Java 学习之路

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

A ng-repeat ：呃加载 Headers . 每个 Headers 都是可点击的 . 单击 Headers 时，ajax调用会获得更多JSON数据 . 我需要在点击的 Headers 下面添加这些数据 .

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

如何才能做到这一点？

2 回答

我会按照@Nicolas的建议使用指令 . 结合@Andrew建议您可以做这样的事情 .

控制器：

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

    $scope.getSubItems = function(id) {
        $http.get('/sub-items/' + id)
            .then(function() {
                $scope.items.subItems = $scope.items.subItems.push(response.data);
            });
    }
});

视图：

<div ng-repeat="item in items">
  <a ng-click="getSubItems(item)">{{item.id}}</a>
  <list sub-items="item.subItems"></list>
</div>

指示：

.directive('list', function() {
    return {
        restrict: 'E',
        scope: {
          subItems: '=subItems'
        },
        template: '<ul>' +
            '<li ng-repeat="subItem in subItems">{{subItem.id}}</li>' +
          '</ul>'
    };
});

回复于 2024-04-28T00:06:09+08:00

这是一个小例子：您的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>

回复于 2024-04-28T00:06:09+08:00

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

2 回答

相关问题