带有按钮的数据列表应显示下面的其余数据

Question

我正在尝试创建一个数据列表，列表的每一行都有一个相应的按钮。我希望这样做，以便当用户单击按钮时，它会显示下面的数据（使用 ng-show）仅针对该特定行。我正在考虑以某种方式将“ID”保存到一个变量，然后根据该 ID 过滤下面的 table 按钮。但说起来容易做起来难。


    <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 1

您可以将 id 作为参数发送给您的函数：

 <button ng-click = "viewMore(x.ID)">View More</button>

然后使用该 ID 在您的范围内设置选定的 ID 字段 -

  $scope.selectedId = null;

  $scope.viewMore = function(id){
    $scope.showDiv = true; 
    $scope.selectedId = id;
  }

然后使用该 ID 来过滤您的用户 -

   <tr ng-repeat = "x in userInfo | filter: { ID: selectedId }">
      <td>{{x.name}}</td>
      <td>{{x.hobby}}</td>
      <td>{{x.ID}}</td>
    </tr>

Answer 2

您使用的是非常旧的 Angular。获取最新的开始。然后创建一个应该重复的子组件，并用数组中的数据提供给它。

带有按钮的数据列表应显示下面的其余数据

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

html

javascript

angularjs

angularjs-ng-repeat