Блог

Я пытаюсь создать список данных с соответствующей кнопкой в каждой строке списка. Я надеюсь сделать так, чтобы, когда пользователь нажимает кнопку, он показывал данные ниже (используя ng-show) только для этой конкретной строки. Я думал о том, чтобы каким-то образом сохранить «идентификатор» в переменной, а затем отфильтровать таблицу ниже по этому идентификатору. Но это оказывается легче сказать, чем сделать.

 
    <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/script.jsamp;deferRun=1

вы можете отправить идентификатор в качестве параметра вашей функции:

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

затем используйте этот идентификатор, чтобы задать выбранное поле идентификатора в вашей области —

   $scope.selectedId = null;

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

затем используйте этот идентификатор для фильтрации вашего пользователя —

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

Вы используете очень старый угловой. начните с самого последнего. Затем создайте дочерний компонент, который следует повторить, и введите в него данные из вашего массива.