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

啊，我现在看到你已经分享了你的Ajax调用问题。并且是，这个Ajax调用就是问题。

你做错了是你一起使用jQuery和Angular。不要那样做。这些是并发技术，它们的工作方式并不相同。 Angular从数据生成DOM，jQuery操纵DOM。换句话说，jQuery会抓取你的数据，但是Angular并不知道它，因此它没有反应并且不会更新视图。

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

解决方案：DROP jQuery并以Angular方式（使用$ http服务）或DROP Angular执行操作，并以jQuery的方式执行所有操作。

Answer 2

通过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 3

我通过一些研究解决了这个问题。 ajax不是主要问题，但主要问题是有两个ng-app。第一个是自动呈现它，但第二个不在document onload呈现。尝试预定义$scope.list并删除ajax时，Ajax不是主要问题，仍然存在重复问题。然后我明白问题是第二个ng-app。我将两种页面格式转换为一个页面并删除了第二个ng-app并将它们全部放入第一个ng-app。然后我决定使用$http角度，而不是jquery的$.ajax，因为无法将$.ajax响应放入角度$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不起作用

3 个答案: