2017-10-24 4 views
1

Kämpfen, um dynamischen Inhalt in einem ngRepeat anzuzeigen. Wenn es Zeit ist, mein Versprechen Inhalt zu zeigen, ich bin immer ein leeres Objekt {}:Anzeigen von dynamischem Inhalt in ngRepeat

<div ng-controller="DemoCtrl"> 
    <div class="sidebar" ng-repeat="row in rows"> 
     <div class="row"> 
      <input type="checkbox"> 
      <div class="name">{{row.name}}</div> 
      <div class="title">{{map[$index]}}</div> 
     </div> 
    </div> 
</div> 

und Controller:

function DemoCtrl($scope, $http, $q) { 
    const rows = function() { 
     const rows = []; 

     for (let i = 0; i < 12; i++) { 
      rows.push({ 
       id: `demo-${i}`, 
       name: `Demo ${i}` 
      }); 
     } 

     return rows; 
    }; 

    $scope.rows = rows(); 
    $scope.map = []; 

    // $scope.$watch($scope.map, function (oldValue, newValue) { 
    // console.log(oldValue, newValue); 
    // }); 

    function _data() { 
     // const promises = []; 

     for (let i = 0; i < $scope.rows.length; i++) { 
      var defer = $q.defer(); 

      $http.get(`https://jsonplaceholder.typicode.com/posts/${i + 1}`).then(function(post) { 
       defer.resolve(`${post.data.title.substring(0, 10)}...`); 
      }); 

      $scope.map.push(defer.promise); 
      // promises.push(defer.promise); 
     } 

     // return $q.all(promises); 
     return $q.all($scope.map); 
    } 

    function _init() { 
     _data().then(function(data) { 
      $scope.map = data; // why aren't we getting here? 
     }); 
    }; 

    _init(); 
} 

Plunker hier: https://plnkr.co/edit/2BMfIU97Moisir7BBPNc

ich mit gebastelt habe einige andere Ideen wie zum Beispiel versuchen, ein $watch auf dem Objekt $scope nach dem Wert ändert, aber ich bin nicht davon überzeugt, dass dies in keiner Weise helfen wird. Einige verweilenden Fragen, die ich habe:

  1. Von dem, was ich verstehe, können Sie ein promise inside a template so wie/warum tut diese Änderung innerhalb eines ngRepeat?
  2. Warum wird mein Rückruf für $q.all nicht aufgerufen?
  3. Wenn dies nicht der richtige Ansatz ist, was ist das?
+0

Ich denke, füllen, dass Sie 'ng-if' zu' ng-repeat' div und ein hinzufügen Bedingung, dass 'rows.length> 0' –

Antwort

2

In Angular müssen Sie fast nie $ q verwenden.

Sie können einfach eine Reihe von Stellen Titel nach jedem $ http.get

function DemoCtrl($scope, $http) { 
    const rows = function() { 
    const rows = []; 

    for (let i = 0; i < 12; i++) { 
     rows.push({ 
     id: `demo-${i}`, 
     name: `Demo ${i}` 
     }); 
    } 

    return rows; 
    }; 

    $scope.rows = rows(); 
    $scope.map = []; 

    function _init() { 
    for (let i = 0; i < $scope.rows.length; i++) { 

     $http.get(`https://jsonplaceholder.typicode.com/posts/${i + 1}`).then(function (post) { 
     $scope.map.push(post.data.title); 
     }); 
    } 
    } 

    _init(); 
} 

https://plnkr.co/edit/zOF4KNtAIFqoCOfinaMO?p=preview

+0

Ich bin mir bewusst,' $ q' wird selten benötigt, aber schlecht geschriebenen Legacy-Code garantiert es in meinem Fall. Danke für die Lösung – djthoms

Verwandte Themen