AngularJS의 마스터 세부 정보

Question

REST API에서 목록을 가져와 선택한 각 항목에 대한 세부 정보를 표시하는 작은 앱을 작성하려고합니다. 선택한 ID를 목록보기에서 세부보기로 전송하는 방법에 대한 간단한 자습서를 찾고 있었지만 알아 내지 못했습니다. 마스터 디테일 기법을 사용해야한다고 가정합니다.

이

목록보기 : 다음에

<ul> 
    <li ng-repeat="gadgetDetails in gadgettDetails"> 

     <div> 
       <a href="#/gadgets/{{gadgetDetails.id}}"><p>{{gadgetDetails.type}}</p></a> 
       <p>{{gadgetDetails.manufacturer}}</p> 
     </div> 
     <hr /> 
    </li> 
</ul> 

그리고 자세히보기

<div> 
    <p><a href="#/gadgetLists">Go back to Gadgets list</a></p> 

     <p>{{gadgetDetails[2].type}}</p> 
     <p>{{gadgetDetails[2].color}}</p> 
     <p>{{gadgetDetails[2].manufcturer}}</p> 
</div> 

그러니 그냥 질문에 대해 내가 넣었습니다 2 (두 번째 객체 여기

코드입니다 REST API에서 가져온 JSON 목록이지만 실제로는 gadgetDetails[i].type 이어야합니다. 그러나 각 항목에 대한 색인 (예 : i)을 가져 오는 방법을 알 수 없습니다. 목록

이 컨트롤러 :

GadgetListCtrl.controller('gdgtList', function($scope, $http, $filter) { 
$http.get('https:.../gadgets.json'). 
    then(function(response) { 
     $scope.gadgettDetails = response.data; 
    }); 

}); 

그래서 질문은 ID로 각 항목에 대한 세부 정보를 표시하는 방법입니다.
감사

Answer 1

당신이 angular ui router PARAMS

아래

하여이를 achive 수있는 것은

$stateProvider 
    .state('gadgets', { 
     url: "/gadgets/:id", 
     templateUrl: 'gadgetDetail.html', 
     controller: 'gadgetController', 
     controllerAs: 'vm', 
     params: { 
     id: null 
     } 
    }); 

및 컨트롤러 파일

, 당신은 같은 ID를 액세스 할 수 있습니다

블록의 .config에 더미 코드 이하

.controller('GadgetController', function($state, $stateParams) { 

    var selectedID = $state.params.id; 
    //alternatively you can get using $stateParams service 
    // $stateParams.id 

    if(selectedID) { 
    // get detail of gadget 
    } 
});