AngularJS remplir dynamiquement les détails de json basé sur l'élément sélectionné

Je suis en train de créer une page où vous avez quelques éléments dans un groupe de la liste qui lorsqu'il est sélectionné doit montrer plus de détails.

Veuillez consulter l'exemple ici http://plnkr.co/edit/Oava3pA9OTsm80K58GdT?p=preview

Comment puis-je remplir les détails dans le fichier json basé sur l'élément qui est sélectionné dans la liste de groupe?

C'est ce que j'ai jusqu'à présent.

html:

<div ng-controller=ItemsController>
    <h3>Test</h3>
    <div class="row">
      <div class="col-md-4">
        <div class="panel panel-default">
          <ul class="list-group">
            <a class="list-group-item" ng-repeat="item in itemDetails">{{item.name}}</a>
          </ul>
        </div>
      </div>

      <div class="col-md-8">
        <div class="panel panel-default">
          <h2>Name: </h2>
          <br />Address Line 1:
          <br />Address Line 2:
          <br />Suburb:
          <br />Phone:
          <br />Email:
        </div>
      </div>
    </div>
  </div>

script:

var myItemsApp = angular.module('myItemsApp', []);

myItemsApp.factory('itemsFactory', ['$http', function($http){
  var itemsFactory ={
    itemDetails: function() {
      return $http(
      {
        url: "mockItems.json",
        method: "GET",
      })
      .then(function (response) {
        return response.data;
        });
      }
    };
    return itemsFactory;

}]);


myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory', function($scope, itemsFactory){
  var promise = itemsFactory.itemDetails();

    promise.then(function (data) {
        $scope.itemDetails = data;
        console.log(data);
    });
}]);

json:

[
   {
      "$id":"1",
      "name":"Test itemName 1",
      "themeName":"ASD",
      "addressLine1":"18 Banksia Street",
      "addressLine2":null,
      "suburb":"Heidelberg",
      "state":"VIC",
      "postalCode":"3084",
      "contactPhone":"+61 3 123456",
      "emailAddress":"[email protected]"
   },
   {
      "$id":"2",
      "name":"Test itemName 2",
      "themeName":"WER",
      "addressLine1":"11 Riverview Place",
      "addressLine2":"Metroplex on Gateway",
      "suburb":"Murarrie",
      "state":"QLD",
      "postalCode":"4172",
      "contactPhone":"1300 73123456",
      "emailAddress":"[email protected]"
   },
   {
      "$id":"3",
      "name":"Test itemName 3",
      "themeName":"ERT",
      "addressLine1":"60 Waterloo Road",
      "addressLine2":null,
      "suburb":"North Ryde",
      "state":"NSW",
      "postalCode":"2113",
      "contactPhone":"123456",
      "emailAddress":"[email protected]"
   }
]

Toute aide serait grandement appréciée.

Je suis très nouveau à la programmation. N'hésitez pas à d'autres façons de réaliser cette si j'ai fait de mal.

OriginalL'auteur aliaz | 2014-06-12