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
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser le ng-cliquez sur la directive de spécifier ce qui se passe lorsque vous cliquez sur quelque chose.
Alors j'en ai fait attribuer l'élément cliqué à la
$scope.selected
objet à l'aide d'une fonction ($scope.select(item)
) et puis j'ai lié les propriétés d'un objet à votre petit section détails. C'est probablement la façon la plus simple de le faire.Ctrl
HTML
Et la
selected
objet est alors disponible comme ceci:Voir mon exemple ici: http://plnkr.co/edit/mUMZ0VGO8l1ufV1JJNQE?p=preview
Merci pour la réponse. Il fonctionne comme un charme. Je souhaite que je pourrais vous donner un rep score. Malheureusement je n'ai pas fait assez pour voter encore. Concernant le code, ses principalement à partir d'exemples sur un débordement de pile. J'ai encore beaucoup à apprendre. J'ai vraiment plaisir à angularJS 🙂
Vous êtes les bienvenus. Pas de soucis, avec plus de questions, vous aurez beaucoup de rep en un rien de temps! 🙂
Comment voulez-vous mettre à jour que par défaut le premier élément dans le fichier JSON?
Je vous remercie. C'est ce que je voulais dire. Lors du chargement de la page, l'ID:1 les données affichées dans le code HTML. J'ai ajouté ceci: $champ d'application.selected = data[0]; Il a travaillé pour moi.
OriginalL'auteur Shomz