AngularJS dynamically populate details from json based on item selected
You can use the ng-click directive to specify what happens when you click something.
So I made it assign the clicked item to the $scope.selected
object using a function ($scope.select(item)
) and then I bound the properties of that object to your little details section. That's probably the simplest way to do it.
Ctrl
$scope.select = function(item) {
$scope.selected = item;
}
$scope.selected = {};
HTML
<a class="list-group-item" ng-click="select(item)" ng-repeat="item in itemDetails">
{{item.name}}
</a>
And the selected
object is then available like this:
<h2>Name: {{selected.name}}</h2>
etc...
See my example here: http://plnkr.co/edit/mUMZ0VGO8l1ufV1JJNQE?p=preview
Comments
-
aliaz almost 2 years
I am trying to create a page where you have few items in a list group which when selected should show more details.
Please view the example here http://plnkr.co/edit/Oava3pA9OTsm80K58GdT?p=preview
How can I populate the details from the json file based on the item that is selected in the list group?
This is what I have so far.
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]" } ]
Any help would be greatly appreciated.
I am very new to programming. Please also feel free to alternative ways of achieving this if I have done it wrong.