与NG-scroll和NG-重复AngularJS [英] AngularJS with ng-scroll and ng-repeat

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

问题描述

采用了棱角分明的UI具有角。标记包括NG-滚动元件，这是我从一个服务检索数据的工作。我想创建的项目行，因此一个NG涡旋内的NG-重复。这在原则（ plunker ），但AngularJS说我有什么不对的JSON编码和需要帮助找出我做错了。

所以要清楚，在plunker但不是在应用程序的标记和JSON下面的工作。在plunker及以下的JSON从调试器响应机构作出。

标记： 

 ＆LT; D​​IV CLASS =行＆GT;
  ＆LT; D​​IV CLASS =COL-MD-12＆GT;
    ＆所述;股利类=video_thumb纳克涡卷='video_list在VideoIndexScrollerSource'缓冲器大小= '10'填充=2＆GT;
      ＆LT; D​​IV CLASS =行NG-重复=视频video_list＆GT;
        ＆所述p为H.;
          ＆LT;一个NG-HREF =/引导/ {{video._id}}目标=_自我＆GT;
            ＆LT; IMG NG-SRC ={{video.thumb}}＆GT;
          ＆所述; / A＆GT;
        ＆所述; / P＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

JSON：

在Rails中，我创建了一个数组的数组。每个元素属性在上面显示code使用的哈希值。在返回的JSON如下：

  [
  [
    {
      拇指：/uploads/thumb_11167113_det.jpg
      _id：52264092a0eef2d029673f72
    }，
    {
      拇指：/uploads/thumb_11169448_det.jpg
      _id：522649b7a0eea05c61388f4a
    }，
    {
      拇指：/uploads/thumb_278817_det.jpg
      _id：522649b4a0eea05c61388be2
    }，
    {
      拇指：/上传/ thumb__old_
      _id：522e5290e4b0889f651f13ae
    }，
    {
      拇指：/uploads/thumb_269411_det.jpg
      _id：522649baa0eea05c613891b3
    }，
    {
      拇指：/上传/ thumb__old_
      _id：5227d1f3a0ee91bdc636efb9
    }，
    {
      拇指：/uploads/thumb_11169964_det.jpg
      _id：52264091a0eef2d029673e49
    }
  ]
  [
    ...
  ]
  [
    ...
  ]
]

不知道为什么这样做不行，NG-滚动循环应该​​把行的数组video_list，NG重复应该抓住从行的每个对象并获取价值。

错误：

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

 类型错误：对象＃＆LT;资源与GT;没有方法'推'
    在副本（HTTP：//本地主机：3000 /资产/角1.2.0 / angular.js体= 1：827：33）
    在新的资源（HTTP：//本地主机：3000 /资产/角1.2.0 /角resource.js体= 1：402：21）
    在http：//本地主机：3000 /资产/角1.2.0 /角resource.js体= 1：483：52
    在Array.forEach（原生）
    在的forEach（HTTP：//本地主机：3000 /资产/角1.2.0 / angular.js体= 1：301：21）
    在angular.module.factory.Resource（匿名函数）$ http.then.value $解决（HTTP：。//本地主机：3000 /资产/角1.2.0 /角resource.js体= 1： 482：37）
    在deferred.promise.then.wrappedCallback（HTTP：//本地主机：3000 /资产/角1.2.0 / angular.js体= 1：10598：99）
    在deferred.promise.then.wrappedCallback（HTTP：//本地主机：3000 /资产/角1.2.0 / angular.js体= 1：10598：99）
    在http：//本地主机：3000 /资产/角1.2.0 / angular.js体= 1：10684：40
    在范围$ get.Scope $的eval（HTTP：//本地主机：3000 /资产/角1.2.0 / angular.js体= 1：11577：44）。angular.js体= 1：9102
（匿名函数）angular.js体= 1：9102
？$得到angular.js体= 1：6707
？deferred.promise.then.wrappedCallback angular.js体= 1：10601
？deferred.promise.then.wrappedCallback angular.js体= 1：10598
（匿名函数）angular.js体= 1：10684
？$ get.Scope $ EVAL angular.js体= 1：11577
。$ get.Scope $消化angular.js体= 1：11422
？$ get.Scope $适用angular.js体= 1：11683
？DONE angular.js体= 1：7700
？completeRequest angular.js体= 1：7866
？xhr.onreadystatechange angular.js体= 1：7822


解决方案

我来包装一个虚拟的行散列每个内部数组。角不喜欢数组的数组，它期望对象数组。此标记适用于新的JSON：

 ＆LT; D​​IV CLASS =行＆GT;
  ＆LT; D​​IV CLASS =COL-MD-12＆GT;
    ＆所述;股利类=video_thumb纳克涡卷='video_list在VideoIndexScrollerSource'缓冲器大小= '10'填充=2＆GT;
      ＆LT; D​​IV CLASS =行NG-重复=视频video_list.row＆GT;
        ＆所述p为H.;
          ＆LT;一个NG-HREF =/引导/ {{video._id}}目标=_自我＆GT;
            ＆LT; IMG NG-SRC ={{video.thumb}}＆GT;
          ＆所述; / A＆GT;
        ＆所述; / P＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

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-重复AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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