AngularJS dynamically populate details from json based on item selected AngularJS dynamically populate details from json based on item selected angularjs angularjs

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