2017-10-27 8 views
1

私は、REST APIからリストを取得し、各選択されたアイテムの詳細を表示する小さなアプリケーションを作成しようとしています。選択したIDをリストビューから詳細ビューに転送する方法についての簡単なチュートリアルを探していましたが、わかりませんでした。私は、マスターディテール技術を使用する必要があると仮定します。マスター詳細in AngularJS

リストビュー:

<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で、各項目について、その詳細を表示する方法です。
おかげ

+0

'.config'ブロックのルーティング設定は何ですか?それもそれに依存する –

答えて

0

あなたはangular ui routerのparams以下

ことで、これをachiveできの.configブロック

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

とコントローラファイル内にダミーコード

である、あなたはとIDにアクセスすることができます以下

.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 
    } 
}); 
関連する問題