I'm trying to create a list of data, with a corresponding button in each row of the list. I am hoping to make it so that when a user clicks the button, it shows the data below, (using ng-show) just for that specific line. I was thinking along the lines of the button somehow saving the "ID" to a variable, and then the table below being filtered on that ID. But it's proving easier said than done.
<div ng-controller="MainCtrl">
<h1>Select relevant information from a list</h1><br>
<table>
<tr>
<th>Name</th>
<th>ID</th>
</tr>
<tr ng-repeat = "x in userInfo">
<td>{{x.name}}</td>
<td>{{x.ID}}</td>
<td><button ng-click = "viewMore()">View More</button></td>
</tr>
</table><br><br>
<div ng-show = "showDiv">
<table><h3>Selected Information</h3>
<tr>
<th>Name (Selection)</th>
<th>Hobby (Selection)</th>
<th>ID (Selection)</th>
</tr>
<tr ng-repeat = "x in userInfo">
<td>{{x.name}}</td>
<td>{{x.hobby}}</td>
<td>{{x.ID}}</td>
</tr>
</table><br><br>
</div>
</div>
import angular from 'angular';
angular.module('plunker', []).controller('MainCtrl', function($scope) {
$scope.userInfo = [{"name":"John", "hobby":"fishing", "ID":"123"},
{"name":"Bob", "hobby":"Golf", "ID":"199"},
{"name":"Jerry", "hobby":"Football", "ID":"aAAa"}];
$scope.viewMore = function(){
$scope.showDiv = true;
}
});
https://plnkr.co/edit/u2uZ008S0Uv6TANM?open=lib%2Fscript.js&deferRun=1
you can send the id as a param to your function:
<button ng-click = "viewMore(x.ID)">View More</button>
then use that id to set a selected id field in your scope -
$scope.selectedId = null;
$scope.viewMore = function(id){
$scope.showDiv = true;
$scope.selectedId = id;
}
then use that id to filter your user -
<tr ng-repeat = "x in userInfo | filter: { ID: selectedId }">
<td>{{x.name}}</td>
<td>{{x.hobby}}</td>
<td>{{x.ID}}</td>
</tr>
You are using a very old Angular. get the latest to start with. Then create a child component that should be repeated, and feed it with data from your array.