AngularJS con ng-scroll e ng-repeat

Utilizzando angolare-ui con angolare. Tag include un ng-scroll elemento, che devo lavorare con i dati recuperati da un servizio. Vorrei creare righe di elementi in modo che un ng-repeat all’interno di un ng-scroll. Questo funziona in linea di principio (plunker) ma AngularJS dice che ho sbagliato qualcosa nella codifica JSON e bisogno di aiuto per capire cosa sto facendo di sbagliato.

Tanto per essere chiari, il markup e JSON al di sotto di lavorare in plunker ma non in app. JSON in plunker e sotto è tratto dal debugger corpo della risposta.

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, ho creato un array di array. Ogni elemento è un hash di proprietà da utilizzare nel suddetto codice sul display. JSON restituito assomiglia a questo:

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

Non so perché questo non funziona, il ng di scorrimento dovrebbe scorrere le righe di mettere un array in video_list, ng-repeat dovrebbe afferrare ogni oggetto dalla riga e di ottenere valori.

Errore:

Questo è il AngularJS di errore visualizzato quando il sopra JSON restituito:

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
  • Ho il sospetto che ci sia qualche analisi codice angolare, alcuni convenzione che sto correndo in conflitto in quanto i dati grezzi opere buttare, ma c’è già analizzato. L’app si basa su Angolare di analizzare la risposta.
  • Sto utilizzando una risorsa “query” metodo isArray è vero-simile di domanda è questa come una soluzione.
  • Può includere il vostro $risorsa chiamata? (dal momento che vediamo traccia dello stack il problema è all’interno: $get
  • Nessun problema, è stato restituito un array di array, AngularJS, apparentemente, non consente. Ho dovuto avvolgere ciascuno interno dell’array con un oggetto e tutto ha funzionato. Leggermente diverso modo di affrontare i dati mostriamo qui sotto.
InformationsquelleAutor pferrel | 2013-12-07



2 Replies
  1. 1

    Ho dovuto avvolgere ciascuno interno dell’array in un fittizio “riga” di hash. Angolare non come array di array, si aspetta un array di oggetti. Questo codice funziona con il nuovo 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>
  2. 0

    Ho visto questo quando si imposta la velocità Angolare di un $resource metodo per get quando stai ricevendo un array (o comunque non di impostazione isArray:true durante la ricezione di un array).

    Il metodo query si aspetta un array (docs):

    ‘query’: {metodo:’GET’, isArray:true},

    get si aspetta un oggetto:

    ‘get’: {metodo:’GET’},

    • Come ho detto sopra, isArray è vero. E ‘ stato un Angolare bisogno di avere interiore matrici avvolto in un oggetto.

Lascia un commento