代码之家 › 专栏 › 技术社区 › Güney SaramalÄ±

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

angularjs-ng-repeat angularjs javascript

Güney SaramalÄ± · 技术社区 · 6 年前

我有这一页;

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

一切都很好,它有$范围。列表是用我从数据库中得到的内容定义的。但是 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);
            }
        });
     });

3 回复 | 直到 6 年前

Jeremy Thille 6 年前

啊,既然您已经共享了Ajax调用,我就明白了问题所在。和对 ,这个Ajax调用就是问题所在。

您所做的错误是将jQuery和Angular一起使用。永远不要那样做。这些是并行技术,它们的工作方式确实不同。Angular从数据生成DOM,jQuery处理DOM。换句话说,jQuery获取您的数据,但Angular对此一无所知,因此它不会做出反应,也不会更新视图。

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

解决方案:放弃jQuery,用Angular的方式做事(使用$http服务),或者放弃Angular,用jQuery的方式做事。

Sachila Ranawaka 6 年前

传递php变量值 ng-init 函数,然后分配列表。

<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)
});

Güney SaramalÄ± 6 年前

我通过一些研究解决了这个问题。ajax不是主要问题,但主要问题是有两个 ng-app . 第一个是自动渲染,但第二个没有渲染 document onload . Ajax并不是主要的问题 $scope.list 如果删除ajax,仍然存在ng重复问题。我知道问题是第二个 ng应用程序 . 我将两页格式转换为一页并删除了第二页 ng应用程序 把它们都放在第一个 ng应用程序 . 然后我决定使用 $http 角度,而不是 $.ajax 因为没有办法 $.ajax 对angulars的反应 $范围。列表 . 最终结果是这样的;

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