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对象。

之后，控制器获得承诺解析，获取新的列表对象，并将其绑定到范围内的东西上。这将过滤到页面的其余部分，并让您保留页面生命周期中的现有列表/任务。