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);
}

如何使用ng-repeat根据另一个表中的行选择来填充表？

1 个答案: