2

angular-ui を angular で使用する。ng-scrollマークアップには、サービスから取得したデータを操作した要素が含まれています。アイテムの行を作成したいのでng-repeat、ng-scroll. これは原則として機能します ( 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
4

2 に答える 2

1

ダミーの「行」ハッシュで各内部配列をラップする必要がありました。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>
于 2013-12-08T00:15:15.890 に答える
0

配列を受け取るときに Angular$resourceメソッドをに設定するget(または配列を受け取るisArray:trueときに設定しない) ときに、これを見てきました。

このメソッドqueryは配列 ( docs ) を想定しています:

'クエリ': {メソッド:'GET', isArray:true},

getオブジェクトを期待します:

'get': {メソッド:'GET'},

于 2013-12-07T23:55:34.647 に答える