如果动态加载页面，则 Ng-repeat 不起作用

Question

我有这个页面；

<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>

然后 ajax 我将此页面称为 #list-holder。

<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>

一切都很好，它附带 $scope.list 是用我从数据库中得到的定义的。但是 ng-repeat="i in list" 不工作并按原样打印 {{i.isim}}。

如果我直接打开第二页，它会打印 i.isim

的输出

对于那些怀疑 ajax 效果不佳的人来说 ajax =)

$('.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);
            }
        });
     });

Answer 1

通过ng-init函数传递php变量值，然后赋值列表。

<div ng-app="myapplist" ng-controller="listCtrl" id="list-container"
  ng-init="loadList('<? echo json_encode($myarr3); ?>')">

      <div ng-repeat="i in list">{{i.isim}}</div>
</div>


angular.module('myapplist', []).controller('listCtrl', function($scope) {
    $scope.list;
    $scope.loadList($scope.list)
});

Answer 2

啊，既然你已经分享了你的 Ajax 电话，我就明白了问题。是，这个Ajax调用就是问题所在。

您做错的是您同时使用了 jQuery 和 Angular。永远不要那样做。这些并发技术的工作方式并不相同。 Angular 从数据生成 DOM，jQuery 操纵 DOM。换句话说，jQuery 获取了您的数据，但 Angular 对此一无所知，因此它没有反应，也没有更新视图。

更不用说您加载的是两个库而不是一个。

解决方案：删除 jQuery 并按照 Angular 的方式执行操作（使用 $http 服务），或者删除 Angular 并按照 jQuery 的方式执行所有操作.

Answer 3

我通过一些研究解决了这个问题。 ajax 不是主要问题，但主要问题是有两个 ng-app。第一个是自动渲染，但第二个不在 document onload 上渲染。 Ajax 不是主要问题，因为尝试预定义 $scope.list 并删除 ajax，仍然存在 ng-repeat 问题。然后我明白问题是第二个ng-app。我将两页格式转换为一页并删除第二个 ng-app 并将它们全部放入第一个 ng-app。然后我决定使用 angular 的 $http，而不是 jquery 的 $.ajax，因为无法将 $.ajax 响应放入 angulars $scope.list。决赛是这样的;

PS：ng-repeat 不需要任何 $apply 或其他东西，因为当 var 更改时它会再次自动呈现。

<script>
angular.module('myapp', []).controller('categoryCtrl', function($scope, $http) {
    $scope.category = <? echo json_encode($myarr); ?>;
    $scope.subcategory = <? echo json_encode($myarr2); ?>;
    $scope.liste;

    $scope.clickfunc = function(e){
        $scope.thissub = $(e).text();
        $scope.thiscate = $(e).parent('.subcate-holder').prev('.cate-class').text();
        $http({
            method : "POST",
            url : "php/salelist.php",
            params:{kategori:$scope.thiscate,altkategori:$scope.thissub}
        }).then(function mySuccess(response) {
            $scope.liste = response.data.list;
        }, function myError(response) {
            $scope.liste = response.statusText;
        });
        }
});
</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" ng-click="clickfunc($event.target)" onClick="showem()">{{y.isim}}</div>
</div>

</div>

<div id="list-holder">
<div id="list-container">
<div id="back" onClick="goback()">&lt;</div>
<input type="text" ng-model="filterem" id="filterem" placeholder="Ara...">
<table class="urun-table">
<tr><th width="31%"></th><th width="10%">Kategori</th><th width="10%">Altkategori</th><th width="31%">İsim</th><th width="7%">Stok</th><th width="11%">Fiyat</th></tr>
</table>
<div id="table-scroll">
<table class="urun-table">
<tr ng-repeat="i in liste | filter:filterem" class="urun-holder">

<td width="33%"><img src="urun/{{i.resim}}" class="urun-img"></td>
<td width="10%" class="urun-cate">{{i.kategori}}</td>
<td width="10%" class="urun-sub">{{i.altkategori}}</td>
<td width="33%" class="urun-name" onClick="details(this)">{{i.isim}}</td>
<td width="7%" class="urun-price">{{i.stok}}</td>
<td width="7%" class="urun-stock">{{i.fiyat}} TL</td>
<td style="display:none" width="0" class="feed">{{i.feed}}</td>
<td style="display:none" width="0" class="origin">{{i.origin}}</td>
<td style="display:none" width="0" class="feature">{{i.feature}}</td>

</tr>
</table>
</div>
</div>

</div>

</div>

如果动态加载页面，则 Ng-repeat 不起作用

Ng-repeat is not working if page is loaded dynamicly

javascript

angularjs

angularjs-ng-repeat