带有 ng-scroll 和 ng-repeat 的 AngularJS [英] AngularJS with ng-scroll and ng-repeat

查看：20
本文介绍了带有 ng-scroll 和 ng-repeat 的 AngularJS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

将 angular-ui 与 angular 一起使用.标记包括一个 ng-scroll 元素，我使用它处理从服务中检索到的数据.我想创建多行项目，以便在 ng-scroll 中添加一个 ng-repeat.这在原则上有效(plunker)但 AngularJS 说我在 JSON 编码中有问题并且需要帮助来弄清楚我做错了什么.

所以要清楚，下面的标记和 JSON 在 plunker 中有效，但在应用程序中无效.plunker 及以下的 JSON 取自调试器响应正文.

标记:

<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_list 中的视频"><p><a ng-href="/guides/{{video._id}}" target="_self"><img ng-src="{{video.thumb}}"></a></p>

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 #没有方法推"在复制 (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:827:33)在新资源 (http://localhost:3000/assets/angular-1.2.0/angular-resource.js?body=1:402:21)在 http://localhost:3000/assets/angular-1.2.0/angular-resource.js?body=1:483:52在 Array.forEach(本机)在 forEach (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:301:21)在 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)在 deferred.promise.then.wrappedCallback (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:10598:99)在 deferred.promise.then.wrappedCallback (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:10598:99)在 http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:10684:40在 Scope.$get.Scope.$eval (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:11577:44) angular.js?body=1:9102(匿名函数) angular.js?body=1:9102$get angular.js?body=1:6707deferred.promise.then.wrappedCallback angular.js?body=1:10601deferred.promise.then.wrappedCallback angular.js?body=1:10598(匿名函数) 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完成 angular.js?body=1:7700completeRequest angular.js?body=1:7866xhr.onreadystatechange angular.js?body=1:7822

解决方案

我不得不将每个内部数组包装在一个虚拟的行"散列中.Angular 不喜欢数组数组，它​​需要对象数组.此标记适用于新的 json:

<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_list.row 中的视频"><p><a ng-href="/guides/{{video._id}}" target="_self"><img ng-src="{{video.thumb}}"></a></p>

Using angular-ui with angular. Markup includes an ng-scroll element, which I have working with retrieved data from a service. I'd like to create rows of items so an ng-repeat inside an ng-scroll. This works in principle (plunker) but AngularJS says I have something wrong in the JSON encoding and need help to figure out what I'm doing wrong.

So to be clear, the markup and JSON below work in plunker but not in the app. The JSON in the plunker and below is taken from the debugger response body.

Markup:

<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:

In Rails, I create an array of arrays. Each element is a hash of properties to use in the above display code. The JSON returned looks like this:

[
  [
    {
      "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"
    }
  ],
  [
    ...
  ],
  [
    ...
  ]
]

Not sure why this doesn't work, the ng-scroll should iterate rows putting an array into video_list, ng-repeat should grab each object from the row and get values.

Error:

This is the AngularJS error I get when the above JSON is returned:

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

解决方案

I had to wrap each inner array in a dummy "row" hash. Angular doesn't like arrays of arrays, it expects arrays of objects. This markup works with the new 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>

这篇关于带有 ng-scroll 和 ng-repeat 的 AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆