3

我想知道为什么我的 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 标签还是我做错了什么？

4

2 回答 2

2

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

虽然我建议你使用controllerAs方法。您唯一需要更改的是，从范围中删除所有绑定，并在控制器的开头创建一个名为 as 的变量，var vm = this;然后将 all 替换$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>
于 2018-06-17T10:55:10.710 回答
1

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

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>

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

于 2018-06-18T12:33:06.477 回答