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