AngularJS avec ng-faites défiler la liste et ng-repeat

L'aide d'angular-ui angulaire. Balisage inclut un ng-scroll élément qui j'ai déjà travaillé avec des données récupérées à partir d'un service. J'aimerais créer des lignes d'éléments donc un ng-repeat à l'intérieur d'un ng-scroll. Cela fonctionne en principe (plunker) mais AngularJS dit que j'ai quelque chose de mal dans l'encodage JSON et besoin d'aide pour comprendre ce que je fais mal.

Donc, pour être clair, le balisage et JSON-dessous de travailler dans plunker mais pas dans l'application. Le JSON dans le plunker et ci-dessous est extrait à partir du débogueur le corps de la réponse.

Balisage:

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

Dans les Rails, j'ai créer un tableau de tableaux. Chaque élément est un hachage de propriétés à utiliser dans l'affichage ci-dessus code. Le JSON retourné ressemble à ceci:

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

Ne sais pas pourquoi cela ne fonctionne pas, le ng-de défilement doit itérer rangées de mettre un tableau dans video_list, ng-repeat doit saisir chaque objet de la ligne et d'obtenir des valeurs.

Erreur:

C'est le AngularJS d'erreur que j'obtiens lorsque les ci-dessus JSON est retourné:

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

Je soupçonne qu'il ya un certain code d'analyse angulaire, quelque convention que je suis en cours d'exécution à l'encontre de depuis les données brutes des œuvres dans le plunk, mais il est déjà analysée. L'application s'appuie sur Angulaire analyser la réponse.
Je suis à l'aide d'une ressource de requête "" la méthode où isArray est vrai, une autre question semblable a cela comme une solution.
Pouvez-vous inclure votre $ressource appel? (puisque nous voir à partir de la trace de la pile la question est à l'intérieur: $get
Pas de problème avec elle, c'était de retourner un tableau de tableaux, qui AngularJS ne semble pas le permettre. J'ai dû envelopper chaque intérieur tableau avec un objet et tout a fonctionné. Manière légèrement différente de l'adresse de données ci-dessous.

InformationsquelleAutor pferrel | 2013-12-07

J'ai dû envelopper chaque intérieur tableau dans un mannequin "ligne" de hachage. Angulaire n'aime pas, des tableaux de tableaux, il s'attend à des tableaux d'objets. Cette balise fonctionne avec la nouvelle 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>

InformationsquelleAutor pferrel

0

J'ai vu cela lors du réglage de l'angle de $resource méthode pour get lorsque vous recevez un tableau (ou sinon de ne pas fixer de isArray:true lors de la réception d'un tableau).

La méthode query attend un tableau (docs):

"query": {method:'GET', isArray:true},

get s'attend à un objet:

'get': {method:'GET'},
- Comme je l'ai dit ci-dessus, isArray est vrai. Il a été Angulaire besoin interne tableaux enveloppé dans un objet.
InformationsquelleAutor KayakDave

Vous devez vous connecter pour publier un commentaire.