각주 $ http.get

Question

모든 목록과 각 목록과 관련된 작업을 표시하려고합니다. 내 컨트롤러에서 나는이 :이 첫 번째 항목에 대한 작동하지만 물론 데이터 [0] .Task 동적 할 필요가

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

. 문제는 각 목록에 대해 한 번 호출된다는 것입니다. 변수를 사용해 보았지만 원래 값으로 재설정되었습니다. 나는 또한 콜백을 사용해 보았지만 행운은 없었다. 나는 내가 무엇을 간과하고 있는지 또는 내가 완전히 잘못하고 있는지 확신 할 수 없다. 각 목록은 작업을 가지고 있으며, 당신은 당신이 할 수있는 이들의 목록을 원하는 경우

Answer 1

귀하의 GET api/list/ 요청 당신은 아마 이런 식으로 뭔가를 반환 : 이것은 당신이 항상 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" 
      } 
     ] 
    } 
] 

.

그러면 모든 목록과 모든 작업을 새로 고칠 때마다 한 번만 호출하면됩니다.

$ 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 객체를 반환하기를 원합니다.

그런 다음 컨트롤러는 약속 해상도를 가져 와서 새 목록 개체를 가져 와서 범위에있는 개체에 바인딩합니다. 이렇게하면 페이지의 나머지 부분까지 필터링되어 페이지 수명 기간 동안 기존 목록/작업을 보존 할 수 있습니다.