Creating my first AngularJS app.
A ng-repeat:er loads titles. Each title is clickable. When clicking a title, an ajax-call is getting more JSON data. I need to add this data below the clicked title.
The normal way, I would create the HTML as a string and append it to the source code. But since I'm using AngularJS, there should be a way to create a partial view with the HTML and another ng-repeat in it.
How can this be done?
I would use a directive as per @Nicolas suggestion. Combining this with what @Andrew suggested you could do something like this.
Controller:
.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);
});
}
});
View:
<div ng-repeat="item in items">
<a ng-click="getSubItems(item)">{{item.id}}</a>
<list sub-items="item.subItems"></list>
</div>
Directive:
.directive('list', function() {
return {
restrict: 'E',
scope: {
subItems: '=subItems'
},
template: '<ul>' +
'<li ng-repeat="subItem in subItems">{{subItem.id}}</li>' +
'</ul>'
};
});
Here's a small example: Your JSON is structured simply, with subItems array in each item's json object.
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>
ng-includedirective: docs.angularjs.org/api/ng.directive:ngInclude. With it you can include partials that can also haveng-includein them — having partials in partials and so on. And you can dynamically change the partial's source (by setting the url to some object reference rather than string literal — it's shown in the example of the documentation entry I've included).