I want to show the information of "[6] Peter who is 95 years old" in a hidden text box, which should only appear when the button
<button ng-click="show_id(friend.id)">get my id</button>ng-model="name", and age with ng-model="age".
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Example - example-example42-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
<script>
angular.module("my_app",[])
.controller("my_ctr",function($scope){
$scope.show_id=function(index){
alert(index);
}
})
</script>
</head>
<body ng-app="my_app" ng-controller="my_ctr">
<div ng-init="friends = [
{id:1, name:'John', age:25, gender:'boy'},
{id:2, name:'Jessie', age:30, gender:'girl'},
{id:3, name:'Johanna', age:28, gender:'girl'},
{id:4, name:'Joy', age:15, gender:'girl'},
{id:5, name:'Mary', age:28, gender:'girl'},
{id:6, name:'Peter', age:95, gender:'boy'},
{id:7, name:'Sebastian', age:50, gender:'boy'},
]">
I have {{friends.length}} friends. They are:
<ul>
<li ng-repeat="friend in friends.slice().reverse()">
[{{friend.id}}] {{friend.name}} who is {{friend.age}} years old.
<input type="text" ng-model="name" ng-hide="true">
<input type="text" ng-model="age" ng-hide="true">
<input type="text" ng-model="gender" ng-hide="true">
<button ng-click="show_id(friend.id)">get my id</button>
</li>
</ul>
</div>
</body>
</html>
Unfortunately, this code is currently not functioning as intended.