chrisdew chrisdew - 2 months ago 17
AngularJS Question

How do I make a AJAX nested list, in AngularJS?

I've made a list who's content is loaded via AJAX, and it works as intended.

I'd now like to make each list entry load (via AJAX) and display a sublist, when clicked upon.

Is this possible in AngularJS? (I'm new to AngularJs and am more than a little confused over $scope.)

<div ng-controller="StockGroupCtrl">
<ul>
<li ng-repeat="group in groups">
<span>{{group.prod_grp}}</span>
<span>{{group.desc}}</span>
<!-- something like
<ul ng-controller="WhatShouldItBe?">
<li ng-repeat="item in items">
<span>{{item.name}}</span>
<span>{{item.price}}</span>
</li>
</ul>
-->
</li>
</li>
</div>


I've made the outer code work with:

function StockGroupCtrl($scope, $http) {
$scope.groups = [];
$scope.handleGroupsLoaded = function(data, status) {
$scope.groups = data;
}
$scope.fetch = function() {
$http.get('/api/stock/groups/').success($scope.handleGroupsLoaded);
}
$scope.fetch();
}


but I can't really see where to start with the inner lists.

Answer Source

How about this? You don't need another controller.

    <ul>
      <li ng-repeat="item in group.items">
        <span>{{item.name}}</span>
        <span>{{item.price}}</span>
      </li>
    </ul>