I am working on a page that includes the following code snippet:
<script>
angular.module('myapp', []).controller('categoryCtrl', function($scope) {
$scope.category = <? echo json_encode($myarr); ?>;
$scope.subcategory = <? echo json_encode($myarr2); ?>;
});
</script>
<div ng-app="myapp" ng-controller="categoryCtrl" id="cate-container">
<div ng-repeat="x in category" class="cate-holder">
<div class="cate-class" onClick="opensubcate(this)">{{x.isim}}</div>
<div class="subcate-holder">
<div ng-repeat="y in subcategory | filter:{kategori:x.isim}" class="subcate-class">{{y.isim}}</div>
</div>
</div>
<div id="list-holder">
</div>
</div>
Using AJAX, I load this page into the #list-holder element.
<script>
angular.module('myapplist', []).controller('listCtrl', function($scope) {
$scope.list = <? echo json_encode($myarr3); ?>;
});
</script>
<div ng-app="myapplist" ng-controller="listCtrl" id="list-container">
<div ng-repeat="i in list">{{i.isim}}</div>
</div>
While everything else is functioning correctly and displaying data fetched from the database within $scope.list, the directive ng-repeat="i in list" is not rendering the values of {{i.isim}}.
If I access the second page directly, it does show the correct output of i.isim.
The provided AJAX functionality ensures proper loading of content for those who may question its effectiveness =)
$('.subcate-class').click(function(){
var thissub = $(this).text();
var thiscate = $(this).parent('.subcate-holder').prev('.cate-class').text();
$.ajax({
url:"php/salelist.php",
data:{kategori:thiscate,altkategori:thissub},
type:'POST',
success: function(e){
$('#list-holder').html(e);
}
});
});