Question

我想知道为什么我的ng-repeat没有从我试图显示的数组中刷新数据。这是html代码片段：

<div ng-controller="photoCtrl as c">
        <div ng-repeat="p in c.photos">
            <div>USER: {{p.user_id}</div><br/>
            <div>PHOTO NAME: {{p.name}}</div><br/>
            <div>PRICE: {{p.price}}</div><br/>
            <hr>
        </div>

        <button ng-click="prev()">Prev</button><input type="number" ng-model="page_nr"><button ng-click="next()">Next</button>
    </div>

这是我的角度控制器代码：

    app.controller('photoCtrl', ['$scope', '$window', 'PhotoFactory', function($scope, $window, PhotoFactory){
    $scope.photos = [];
    $scope.page_nr = 0;
    $scope.searchNextFive = function(){
        let toSend = angular.copy($scope.page_nr);
        PhotoFactory.searchNextFive(toSend).then(function(response){
            $scope.photos = angular.copy(response.data);
            console.log($scope.photos);
        });
    };

    $scope.getAll = function(){
        let toSend = angular.copy($scope.user);
        PhotoFactory.getAll(toSend).then(function(response){
            $scope.photos = angular.copy(response.data);
            console.log($scope.photos);
        });
    };
    $scope.prev = function(){
        $scope.page_nr--;
        $scope.searchNextFive();
    };

    $scope.next = function(){
        $scope.page_nr++;
        $scope.searchNextFive();
    };
}]);

代码没有给出任何错误。更改完成后，数组“照片”正确刷新，我通过在console.log（）上打印“照片”来看到它。我想知道为什么数据不呈现。 ng-repeat不能用于div标签，还是我做错了什么？

Answer 1

您正在混合两种方法，您预测一种方法会像另一种方法一样起作用。在这里，您使用controllerAs模式，您已经定义了控制器别名c，如ng-controller="photoCtrl as c"。这意味着您将通过将变量和函数附加到this（上下文）来公开绑定。但是您确实将变量和函数附加到$scope，这意味着您不需要使用控制器别名。您可以通过从HTML中的变量名称中删除c.来快速解决此问题。

虽然我建议您使用controllerAs方法。您唯一需要更改的是，从作用域中删除所有绑定，并在控制器的开头创建一个名为var vm = this;的变量，然后将所有$scope.替换为vm.。

并更改以下行

<button ng-click="prev()">Prev</button>
<input type="number" ng-model="page_nr"/>
<button ng-click="next()">Next</button>

到

<button ng-click="c.prev()">Prev</button>
<input type="number" ng-model="c.page_nr"/>
<button ng-click="c.next()">Next</button>

Answer 2

如果您要单独使用范围方法，那么这样的方法可以正常工作：

HTML代码为：

<div ng-controller="photoCtrl"> <!--note the change here instead of "photoCtrl as c" we are using "photoCtrl" -->
    <div ng-repeat="p in photos">
        <div>USER: {{p.user_id}</div><br/>
        <div>PHOTO NAME: {{p.name}}</div><br/>
        <div>PRICE: {{p.price}}</div><br/>
        <hr>
    </div>

    <button ng-click="prev()">Prev</button><input type="number" ng-model="page_nr"><button ng-click="next()">Next</button>
</div>

您无需修改的控制器代码。

ng-repeat标记不会刷新模型中的数据

2 个答案: