Question

您好我正试图在Angularjs App中显示来自服务器的数据，在那里我获取数据并使用ng-repeat通过控制器显示它。

以下是我的控制器的样子：

module.controller('FiveReasons', function($scope, $http, $rootScope, $sce) {
ons.ready(function() {
                    $scope.reasonsLists = {};
                   var reasonsListing = $http.get("http://vbought.com/design_14/index.php/design_ci/post/Clients");
                    reasonsListing.success(function(data, status, headers, config) {
                        console.log(data[0].post_title);
                        $scope.reasonsLists = data;
                        $scope.spinner = false;
                    });
                    reasonsListing.error(function(data, status, headers, config) {

                        alert("Can Not load the address Ajax");
                    });   
    });
});

但是当ng-repeat完成加载时，数据不会显示。

以下是我的ng-repeat：

  <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel" name="FiveRes" class="FiveRes">

        <div ng-repeat="reasonsList in reasonsLists">

          <ons-carousel-item style="background: #09a4c0;" >
            <div class="item-label">Number : {{reasonsList}}</div>

          </ons-carousel-item>

        </div>


          <ons-carousel-cover></ons-carousel-cover>
        </ons-carousel>

如果数据存在，我现在如何刷新列表。就像我们在jquery中“触发（”刷新“）”。

运行ng-repeat后，这就是我获取值的方法，但屏幕显示为空白。

谢谢！（提前）

Answer 1

试试这个：

module.controller('FiveReasons', function($scope, $http, $rootScope, $sce) {
       ons.ready(function() {
           $scope.reasonsLists = {};
           var reasonsListing = $http.get("http://vbought.com/design_14/index.php/design_ci/post/Clients");
           reasonsListing.success(function(data, status, headers, config) {
                 console.log(data[0].post_title);
                 $scope.reasonsLists = data;
                 $scope.spinner = false;
           });
           reasonsListing.error(function(data, status, headers, config) {
                 alert("Can Not load the address Ajax");
           }); 
           //ADD this to notify Angular for the changes and run a digest cycle
           $scope.$digest();  
      });
});

这种情况正在发生，因为事件（ons-ready）处理程序不会启动新的$digest周期。

要显示数据而不必调用$digest()，请删除ons-ready回调并直接在控制器主体中执行代码。像下面的例子一样：

module.controller('FiveReasons', function($scope, $http, $rootScope, $sce) {
       $scope.reasonsLists = {};
       var reasonsListing = $http.get("http://vbought.com/design_14/index.php/design_ci/post/Clients");
       reasonsListing.success(function(data, status, headers, config) {
             console.log(data[0].post_title);
             $scope.reasonsLists = data;
             $scope.spinner = false;
       });
       reasonsListing.error(function(data, status, headers, config) {
             alert("Can Not load the address Ajax");
       }); 
       //No need to call $digest
});

更新：选中此Codepen，这是代码的简化版本，仅显示问题。从评论中删除$scope.$digest()以查看carousel是否有效。

Answer 2

我认为在这种情况下我不会使用ready并使用ng-init调用你的代码。

module.controller('FiveReasons', function($scope, $http) {
this.reasonsLists = {};
$scope.getReasonsLists = function() {
    $scope.reasonsLists = {};
    $http.get("http://vbought.com/design_14/index.php/design_ci/post/Clients")
        .success(function(data, status, headers, config) {
            console.log(data[0].post_title);
            $scope.reasonsLists = data;
            $scope.spinner = false;
        })
        .error(function(data, status, headers, config) {
            alert("Can Not load the address Ajax");
        });
};

}）;

然后在表格标签上的html中添加ng-init =＆＃34; getReasonsLists（）＆＃34;

Answer 3

不需要“刷新”，因为角度使用不同的方法。在某些事件如“点击”或返回$ http-promise之后，angular会通过绑定变量并检查它们是否已更改 - 如果是，则更改DOM。

在你的情况下，我认为在你添加成功回调之前，承诺正在回归。尝试将它链接起来：

$http.get("http://vbought.com/design_14/index.php/design_ci/post/Clients").success(function(data, status, headers, config) {
    console.log(data[0].post_title);
    $scope.reasonsLists = data;
    $scope.spinner = false;
}).error(function(data, status, headers, config) {
    alert("Can Not load the address Ajax");
});

在其他情况下，您可以使用$ scope。$ apply（）但我认为这应该告诉您，您不能嵌套$摘要，因为在$ http请求之后应该有一个。

ng-repeat中的刷新列表没有onclick功能

3 个答案: