Angular $ http.get

Question

我試圖顯示與每個列表相關的所有列表和任務。在我的控制器中，我有：

$http.get('api/list/').success(function (data) { 
      $scope.lists = data; 
      $scope.tasks = data[0].Task; 
     }); 

這適用於第一項，但當然數據[0] .Task需要是動態的。我遇到的問題是每個列表都會調用一次。我嘗試使用一個變量，但它被重置爲原始值。我也嘗試過使用回調，但沒有運氣。我不確定我忽略了什麼，或者我是否會發現所有錯誤。

Answer 1

你GET api/list/要求，你可能回這樣的事：

[ 
    { 
     "id": 1, 
     "name": "List #1", 
     "tasks": [ 
      { 
       "id": 1, 
       "name": "Task #1 on List #1" 
      }, 
      { 
       "id": 2, 
       "name": "Task #2 on List #1" 
      }, 
      { 
       "id": 3, 
       "name": "Task #3 on List #1" 
      } 
     ] 
    }, 
    { 
     "id": 2, 
     "name": "List #2", 
     "tasks": [ 
      { 
       "id": 1, 
       "name": "Task #1 on List #2" 
      }, 
      { 
       "id": 2, 
       "name": "Task #2 on List #2" 
      }, 
      { 
       "id": 3, 
       "name": "Task #3 on List #2" 
      } 
     ] 
    } 
] 

這是假設你總是希望在api/list/命令返回相關的任務。

然後，您只需在每次要刷新所有列表和所有任務時調用一次。

您應該有一個綁定到視圖的控制器，其中調用了$ http.get。它應該設置$scope.lists = data成功。

在你看來，你只需要兩個嵌套的ng-repeat標籤。例如，你可以使用無序列表：

<div ng-controller="ListsController"> 
    <ul> 
     <li ng-repeat="list in lists"> 
      <ul> 
       <li ng-repeat="task in list.tasks"> 

       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

我沒有使用過，但角度我敢肯定，這是所有你需要做的。單個AJAX調用將爲每個列表填充<li>元素，併爲屬於該列表的每個任務嵌套<li>元素。

Answer 2

如果每個列表中有一項任務，希望他們的列表，你可以這樣做：

$scope.tasks = data.map(function(obj){return obj.task;}) 

map創建基於什麼函數返回每個列表的數組。

Answer 3

最好的辦法是把http.get包裝在工廠中，讓它返回你的列表中有任務的new表示。這樣你得到新的引用，它不會覆蓋你現有的對象。實質上，你希望http.get在其成功解析中返回新的List對象。

之後，控制器獲得承諾解析，獲取新的列表對象，並將其綁定到範圍內的東西上。這將過濾到頁面的其餘部分，並讓您保留頁面生命週期中的現有列表/任務。