As someone who is new to angularJs, I am looking to convert an app to angularJs but I have encountered a roadblock:
The custom accordion markup I am working with is as follows:
<div class="accord_main_wrap" ng-controller="catController">
<div class="accord_item_wrap" ng-repeat="head in heads">
<p class="accord_head" data-notvisible="true">{{head.text}}</p>
<div class="accord_content_wrap">
<ul>
<li ng-repeat="sub in subs">{{sub.text}}</li>
</ul>
</div>
</div>
</div>
In terms of the controller :
function catController($scope, $http) {
$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
$scope.heads = [];
$scope.subs = [];
$http.post(apiURL,$.param({maincat:"true"}))
.success(function(mainCatData,status,headers,config){
for(var d=0;d<mainCatData.cat.length;d++){
$scope.heads.push(mainCatData.cat[d]);
}
for(var h=0;h<$scope.heads.length;h++){
$http.post(apiURL,$.param({subcat:$scope.heads[h].id}))
.success(function(subCatdata,stat,hea,conf){
for(var s=0;s<subCatdata.cat.length;s++){
$scope.subs.push(subCatdata.cat[s]);
}
});
}
});
The Issue at Hand :
It's clear that each accordion header should display its own set of subheadings.
However, in the current code, $scope.subs mixes and assigns all the subheadings to every accordion.
How can I ensure that the correct subheadings are assigned to their respective main headings?