List of data with buttons that should display the rest of the data below

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

Answer

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>

Advertisement

Answer