AngularJS带有ng滚动和ng重复

AngularJS with ng-scroll and ng-repeat

本文关键字：ng 重复 滚动 AngularJS 带有      更新时间：2024-04-18

将angular ui与angular一起使用。标记包括一个ng-scroll元素，我使用它从服务中检索到的数据。我想创建项目行，以便在ng-scroll中创建ng-repeat。这在原则上是有效的（plunker），但AngularJS说我在JSON编码中有问题，需要帮助找出我做错了什么。

所以需要明确的是，下面的标记和JSON在plunker中工作，但在应用程序中不工作。plunker和下面的JSON取自调试器响应体。

标记：

<div class="row" >
  <div class="col-md-12" >
    <div class="video_thumb" ng-scroll='video_list in VideoIndexScrollerSource' buffer-size='10' padding="2" >
      <div class="row" ng-repeat="video in video_list">
        <p>
          <a ng-href="/guides/{{video._id}}" target="_self">
            <img ng-src="{{video.thumb}}">
          </a>
        </p>
      </div>
    </div>
  </div>
</div>

JSON:

在Rails中，我创建了一个数组数组。每个元素都是要在上面的显示代码中使用的属性的散列。返回的JSON如下所示：

[
  [
    {
      "thumb": "/uploads/thumb_11167113_det.jpg",
      "_id": "52264092a0eef2d029673f72"
    },
    {
      "thumb": "/uploads/thumb_11169448_det.jpg",
      "_id": "522649b7a0eea05c61388f4a"
    },
    {
      "thumb": "/uploads/thumb_278817_det.jpg",
      "_id": "522649b4a0eea05c61388be2"
    },
    {
      "thumb": "/uploads/thumb__old_",
      "_id": "522e5290e4b0889f651f13ae"
    },
    {
      "thumb": "/uploads/thumb_269411_det.jpg",
      "_id": "522649baa0eea05c613891b3"
    },
    {
      "thumb": "/uploads/thumb__old_",
      "_id": "5227d1f3a0ee91bdc636efb9"
    },
    {
      "thumb": "/uploads/thumb_11169964_det.jpg",
      "_id": "52264091a0eef2d029673e49"
    }
  ],
  [
    ...
  ],
  [
    ...
  ]
]

不确定为什么这不起作用，ng scroll应该迭代行，将数组放入video_list，ng repeat应该从行中获取每个对象并获取值。

错误：

这是我在返回上面的JSON时得到的AngularJS错误：

TypeError: Object #<Resource> has no method 'push'
    at copy (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:827:33)
    at new Resource (http://localhost:3000/assets/angular-1.2.0/angular-resource.js?body=1:402:21)
    at http://localhost:3000/assets/angular-1.2.0/angular-resource.js?body=1:483:52
    at Array.forEach (native)
    at forEach (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:301:21)
    at angular.module.factory.Resource.(anonymous function).$http.then.value.$resolved (http://localhost:3000/assets/angular-1.2.0/angular-resource.js?body=1:482:37)
    at deferred.promise.then.wrappedCallback (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:10598:99)
    at deferred.promise.then.wrappedCallback (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:10598:99)
    at http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:10684:40
    at Scope.$get.Scope.$eval (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:11577:44) angular.js?body=1:9102
(anonymous function) angular.js?body=1:9102
$get angular.js?body=1:6707
deferred.promise.then.wrappedCallback angular.js?body=1:10601
deferred.promise.then.wrappedCallback angular.js?body=1:10598
(anonymous function) angular.js?body=1:10684
$get.Scope.$eval angular.js?body=1:11577
$get.Scope.$digest angular.js?body=1:11422
$get.Scope.$apply angular.js?body=1:11683
done angular.js?body=1:7700
completeRequest angular.js?body=1:7866
xhr.onreadystatechange angular.js?body=1:7822

我不得不将每个内部数组封装在一个伪"行"散列中。Angular不喜欢数组，它期望对象的数组。这个标记与新的json:一起使用

<div class="row" >
  <div class="col-md-12" >
    <div class="video_thumb" ng-scroll='video_list in VideoIndexScrollerSource' buffer-size='10' padding="2" >
      <div class="row" ng-repeat="video in video_list.row">
        <p>
          <a ng-href="/guides/{{video._id}}" target="_self">
            <img ng-src="{{video.thumb}}">
          </a>
        </p>
      </div>
    </div>
  </div>
</div>

我在接收数组时将Angular $resource方法设置为get时看到了这一点（或者在接收阵列时不设置isArray:true）。

方法query需要一个数组（docs）：

"query"：｛method:'GET'，isArray:true｝，

get期望一个对象：

"获取"：｛方法："获取"｝，

相关文章：