Как заполнить таблицу на основе выбора строки в другой таблице с помощью ng-repeat?

Question

У меня есть таблица, в которой пользователь может выбрать один из параметров, и на основе этого параметра я должен взять выбранный объект и заполнить его в другой таблице .... (Пользователи заполняются вызовом API в угловой контроллер). Вкратце я пытаюсь попросить пользователя ввести слово для поиска, затем извлечь пользователей на основе этого ключевого слова, и когда пользователь выберет пользователя, которого ищет, я должен показать этого пользователя в другой таблице (Подробная информация о пользователе). )

{{ form_row(form.userKeyword, { 'attr': { 'ng-model': 'userKeyword', 'ng-value' :'userSelect.id'} }) }}

<table class="table table-bordered table-hover" ng-show="showTable">
  <tr>
    <th>User Id </th>
    <th>Full name </th>
    <th>E-mail </th>
    <th>Phone Number </th>
  </tr>

  <tr ng-click="OnTableSelect()" ng-repeat="user in users track by user.id" ng-model="userSelect">
    <td>{{ 'ng::user.id::' }}</td>
    <td>{{ 'ng::user.name::' }}</td>
    <td>{{ 'ng::user.email::' }}</td>
    <td>{{ 'ng::user.phone::' }}</td>
  </tr>

</table>

<a href="" ng-click="OnButtonClick()" class="btn btn-primary">Search</a>

</div>
<div class="form-group" ng-show="showUserDetails">
  <label>User Details: </label>
  <table class="table table-bordered table-hover">
    <tr>
      <th>User Id </th>
      <th>Full name </th>
      <th>E-mail </th>
      <th>Phone Number </th>
    </tr>
    <tr ng-model="userSelect">
      <td>{{ 'ng::user.id::' }}</td>
      <td>{{ 'ng::user.name::' }}</td>
      <td>{{ 'ng::user.email::' }}</td>
      <td>{{ 'ng::user.phone::' }}</td>
    </tr>
  </table>

app.controller('My Controller', function($scope, $http) {
      $scope.showTable = false;
      $scope.showUserDetails = false;
      $scope.users = [];
      $scope.searchBy = "";
      $scope.keyword = "";
      $scope.userSelect = "";
      $scope.userKeyword = "";


      $scope.OnButtonClick = function() {
        $scope.showTable = true;
        console.log($scope.searchBy);
        var request = $http({
          method: "GET",
          url: Routing.generate('api_keyword_users', {
            'searchBy': $scope.searchBy,
            'keyword': $scope.keyword,
          })
        });
        request.success(function(response) {
          $scope.users = response;
          console.log($scope.users);
        });
      }

      $scope.OnTableSelect = function() {
        $scope.showUserDetails = true;
        $scope.showTable = false;
        console.log($scope.userKeyowrd);
        console.log($scope.userSelect);

      }

Answer 1

Нельзя использовать ng-model для элемента <tr>. Вместо этого вы можете использовать директиву ng-click для <tr> и передать пользователя как часть вызова метода контроллера:

<table class="table table-bordered table-hover" ng-show="showTable">
  <tr>
    <th>User Id </th>
    <th>Full name </th>
    <th>E-mail </th>
    <th>Phone Number </th>
  </tr>

  <tr ng-click="OnTableSelect(user)" ng-repeat="user in users track by user.id">
    <td>{{ 'ng::user.id::' }}</td>
    <td>{{ 'ng::user.name::' }}</td>
    <td>{{ 'ng::user.email::' }}</td>
    <td>{{ 'ng::user.phone::' }}</td>
  </tr>

</table>

$scope.OnTableSelect = function(user) {
    $scope.showUserDetails = true;
    $scope.showTable = false;
    console.log(user);
}