Angularjs http get then and binding to a list

Question

I have a list that looks like this     lt li ng-repeat  document in DisplayDocuments    ng-class  IsFiltered document Filtered   gt       lt span gt  lt input type  checkbox  name  docChecked  id  doc   document Id    ng-model  document Filtered    gt  lt  span gt       lt span gt   document Name   lt  span gt   lt  li gt    I bind this list in my controller  to this     scope Documents    http get   Documents DocumentsList     caseId  then function result        return result data        When this runs  I dont get any results  when I remove the then method  I get three empty lines  making the count OK  but no information is displayed    I know  everthing  else works  since I previously populated the list with jQuery  what am I doing wrong   Here s the response from the server    Id 3f597acf-a026-45c5-8508-bc2383bc8c12  Name ZZ BL0164 Skisse BL0164 945111 pdf  Order 1       Id 46f51f1f-02eb-449a-9824-8633e8ae7f31  Name ZB BL0201 Firmaattest BL0201 945111 pdf  Order 1       Id fddd1979-c917-4b32-9b83-b315f66984ed  Name ZA BL0228 Legitimasjonsskjema BL0228 945111 pdf

User · Answer

Promise returned from  http can not be binded directly  I dont exactly know why   I m using wrapping service that works perfectly for me    factory  DocumentsList   function  http   q       var d    q defer         http get   DocumentsList   success function data           d resolve data               return d promise        and bind to it in controller   function Ctrl  scope  DocumentsList         scope Documents   DocumentsList              UPDATE    In Angular 1 2 auto-unwrap promises was removed   See http   docs angularjs org guide migration templates-no-longer-automatically-unwrap-promises

User · Answer

Actually you get promise on  http get    Try to use followed flow    lt li ng-repeat  document in documents  ng-class  IsFiltered document Filtered   gt       lt span gt  lt input type  checkbox  name  docChecked  id  doc   document Id    ng-model  document Filtered    gt  lt  span gt       lt span gt   document Name   lt  span gt   lt  li gt    Where documents is your array    scope documents         http get   Documents DocumentsList     caseId  then function result        result data forEach function val  i              scope documents push    put data here                function error        alert error message

User · Answer

http methods return a promise  which can t be iterated  so you have to attach the results to the scope variable through the callbacks    scope documents        http get   Documents DocumentsList     caseId     then function result         scope documents   result data        Now  since this defines the documents variable only after the results are fetched  you need to initialise the documents variable on scope beforehand   scope documents       Otherwise  your ng-repeat will choke    This way  ng-repeat will first return an empty list  because documents array is empty at first  but as soon as results are received  ng-repeat will run again because the  documents  have changed in the success callback   Also  you might want to alter you ng-repeat expression to    lt li ng-repeat  document in documents  ng-class  IsFiltered document Filtered   gt    because if your DisplayDocuments   function is making a call to the server  than this call will be executed many times over  due to the  digest cycles

User · Answer

Try using the success   call back       http get   Documents DocumentsList     caseId  success function  result         scope Documents   result        But now since Documents is an array and not a promise  remove the      lt li ng-repeat  document in Documents  ng-class  IsFiltered document Filtered   gt   lt span gt              lt input type  checkbox  name  docChecked  id  doc   document Id    ng-model  document Filtered    gt           lt  span gt    lt span gt   document Name   lt  span gt    lt  li gt

[angularjs] Angularjs $http.get().then and binding to a list

Examples related to angularjs

Examples related to get

Examples related to promise