AngularJS获取元素的id，并在控制器中使用

Question

我刚开始学习AngularJS，我正在尝试创建一个非常简单的Web应用程序。现在，我有一些用户。每个用户都显示在一个单独的表中，每个用户都有自己的详细信息，这些信息显示在其下的表格中。

$scope.userList = [{username: "Bob_t", detailsId: 1}, {username: "Mike_V", detailsId: 2}];
$scope.userDetails = [{Name: "Bob", Age: 20, id: "1"}, {Name: "Michael", Age: 18, id: "2"}];

您可以看到每个用户都引用了相应的详细信息（userList中的detailsId对应于userDetails中的id）。

基本上，我要做的是最初为每个用户隐藏详细信息表。当有人单击特定用户的展开按钮时，打开该用户的相应详细信息表并使用该用户的详细信息填充该表。我遇到的问题是从点击的展开按钮获取detailsId，然后使用它来查询我的数据库以获取正确的用户详细信息以显示在其下的表格中。

<div ng-repeat="user in userList | filter:searchBox">
                    <div class="uk-panel-box-secondary uk-overflow-container tableDiv uk-margin-large-bottom">
                    <table class="uk-table uk-table-hover uk-margin-top">
                        <thead>
                            <tr>
                                <th>Username</th>
                            </tr>
                        </thead>
                    </table>
                    <a class="uk-margin-bottom uk-margin-left" id="expandIcon" ng-click="isOpened=!isOpened; showOrHideDetails(isOpened, param)" ng-class="{'uk-icon-plus-square-o': !isOpened, 'uk-icon-minus-square-o': isOpened}"></a>  
                 </div>  
                 <div class="uk-panel-box-secondary uk-overflow-container uk-margin-top uk-margin-large-left uk-margin-bottom tableDiv">
                    <table class="uk-table uk-table-hover uk-margin-top">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Age</th>
                                <th></th>
                            </tr>
                        </thead>
                          <tr ng-repeat="details in userDetails" id={{user.id}}>
                            <td>{{details.Name}}</td>
                            <td>{{details.Age}}</td>
                            <td>
                                <a href="" class="uk-icon-hover uk-icon-pencil-square-o icons"></a>
                                <a href="" class="uk-icon-hover uk-icon-trash icons uk-text-danger" ng-click="delete($index)"></a>
                             </td>
                          </tr>
                    </table>  
                 </div>  
 </div> 

我的控制员：

$http({
        method : "GET",
        url : "http://database:8081/userAccounts/"
    }).then(function mySucces(response) {
        $scope.userList = response.data;
    }, function myError(response) {
        // $scope.userList = response.statusText;
    });

    $scope.showOrHideDetails = function(isOpened, param) 

        if(isOpened){
        console.log($scope.id)
        $scope[id] = true;
        console.log($scope.id);
            $http({
                method : "GET",
                url : "http://database:8081/details?id=" + index
            }).then(function mySucces(response) {
                $scope.userDetails = response.data;
            }, function myError(response) {
                $scope.userDetails = response.statusText;
            });

        }
        else{
            $scope.showDetails = false;
        }
    }

让我感到困惑的是，一旦我在查询数据库后获得了正确的userDetails对象，我该如何使用该信息填充相应的表？

我知道我可能需要一个模型，但这让我感到困惑，因为用户数量未知。

Answer 1

首先，你的代码有点混乱..

在每次查询后，您都会将响应（哪一个是单个用户的详细信息）归因于整个 array userDetails：

$scope.userDetails = response.data;

虽然它应该是：

$scope.userDetails.push(response.data);

此外，你有一个名为isOpened的变量，肯定它不会起作用，因为你只有一个变量的多个按钮。

所以我的建议是将其改为：

<a class="uk-margin-bottom uk-margin-left" id="expandIcon" ng-click="showOrHideDetails(user)" ng-class="{'uk-icon-plus-square-o': !user.isOpened, 'uk-icon-minus-square-o': user.isOpened}"></a>

此外，您还必须检查userDetail数组中是否已有userDetails。

最后，由于您希望根据用户显示详细信息，因此您可以使用原生 filter，因为您已拥有id 属性<两个arrays中的用户/ em>，如下所示：

<tr ng-if="user.isOpened" ng-repeat="details in userDetails | filter: { id: user.detailsId }" id={{user.id}}>

简单 演示：

＆＃13;

＆＃13;

(function() {
  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope', '$http'];

  function MainCtrl($scope, $http) {
    $scope.userList = [{
      username: "Bob_t",
      detailsId: 1
    }, {
      username: "Mike_V",
      detailsId: 2
    }];
    $scope.userDetails = [{
      Name: "Bob",
      Age: 20,
      id: "1"
    }, {
      Name: "Michael",
      Age: 18,
      id: "2"
    }];

    $scope.showOrHideDetails = function(user) {
      user.isOpened = !user.isOpened;

      function mySuccess(response) {
        $scope.userDetails.push(response.data);
      }

      function myError(response) {
        console.log(response.statusText);
      }
      
      if (user.isOpened) {
        $http.get('http://database:8081/details?id=' + user.id)
          .then(mySuccess)
          .catch(myError);
      } else {
        $scope.showDetails = false;
      }
    }
  }
})();

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/js/uikit.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/css/uikit.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body ng-controller="MainCtrl">
  <div ng-repeat="user in userList | filter:searchBox">
    <div class="uk-panel-box-secondary uk-overflow-container tableDiv uk-margin-large-bottom">
      <table class="uk-table uk-table-hover uk-margin-top">
        <thead>
          <tr>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td ng-bind="user.username"></td>
          </tr>
        </tbody>
      </table>
      <a class="uk-margin-bottom uk-margin-left" id="expandIcon" ng-click="showOrHideDetails(user)" ng-class="{'uk-icon-plus-square-o': !user.isOpened, 'uk-icon-minus-square-o': user.isOpened}"></a>
    </div>
    <div class="uk-panel-box-secondary uk-overflow-container uk-margin-top uk-margin-large-left uk-margin-bottom tableDiv">
      <table class="uk-table uk-table-hover uk-margin-top">
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th></th>
          </tr>
        </thead>
        <tr ng-if="user.isOpened" ng-repeat="details in userDetails | filter: { id: user.detailsId }" id={{user.id}}>
          <td ng-bind="details.Name"></td>
          <td ng-bind="details.Age"></td>
          <td>
            <a href="" class="uk-icon-hover uk-icon-pencil-square-o icons"></a>
            <a href="" class="uk-icon-hover uk-icon-trash icons uk-text-danger" ng-click="delete($index)"></a>
          </td>
        </tr>
      </table>
    </div>
  </div>
</body>

</html>

＆＃13;

＆＃13;

＆＃13;

我希望它有所帮助!!

Answer 2

你试过从

传递用户吗？

<div ng-repeat="user in userList | filter:searchBox">

运行showOrHideDetails（user）