Reputation: 57
I have a list of names that is connected to different objects in an array. I would like to, whenever you click one of the names, get the values and output them in another list respective to that that object. For right now I console.log the right values, but don't know how to output it:
<a href="#" id="name" ng-click="updateIndex($index);">{{ person.name }}</a>
Controller:
$scope.updateIndex = function(index) {
console.log($scope.person[index]); //Logs the right values
}
How can I output the values from the object which name is clicked to:
<div class="wrap" ng-repeat="per in person">
<div class="box">
{{ person.name }}
</div>
<div class="box">
{{ person.age }}
</div>
<div class="box">
{{ person.town }}
</div>
<div class="box">
{{ person.country }}
</div>
<div class="box">
{{ person.gender }}
</div>
</div>
Thanks!
Upvotes: 0
Views: 62
Reputation: 1145
Just assign $scope.person[index] to another variable in the click function and output it in the template.
Upvotes: 0
Reputation: 68665
You can store the variable in the variable an use it:
$scope.updateIndex = function(index) {
$scope.currentPerson = $scope.person[index]
}
<div class="wrap" ng-repeat="per in currentPerson">
<div class="box">
{{ person.name }}
</div>
<div class="box">
{{ person.age }}
</div>
<div class="box">
{{ person.town }}
</div>
<div class="box">
{{ person.country }}
</div>
<div class="box">
{{ person.gender }}
</div>
</div>
Upvotes: 1