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

Question

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

Guy Perry · Accepted Answer · 2021-09-29 06:29:28Z

2

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>

answered Sep 29, 2021 at 6:29

Guy Perry

3061 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

versb Over a year ago

Brilliant. Thanks so much!

Johansrk · Accepted Answer · 2021-09-29 06:31:03Z

-1

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.

answered Sep 29, 2021 at 6:31

Johansrk

5,2803 gold badges40 silver badges39 bronze badges

3 Comments

Jeremy Thille Over a year ago

That's a comment, not at all an answer to OP's problem

Johansrk Over a year ago

sometimes a comment can be the answer :D

versb Over a year ago

Hi Jeremy, I agree - but unfortunately this is for a school assignment and they require we use this version! Medieval I know :(

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related