javascript - AngularJS 获取单击的元素的 id 并在 Controller 中使用

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> 

我的 Controller :

$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

首先，你的代码有点困惑..

在每个查询之后，您将响应(其中一个是单个用户的详细信息)归因于整个 数组 userDetails:

$scope.userDetails = response.data;

虽然应该是:

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

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

所以我的建议是将其更改为:

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

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

最后，由于您想根据用户显示详细信息，因此可以使用native filter ，因为您已经在两个数组中拥有用户的id属性，如下所示:

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

一个简单演示:

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

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

希望对你有帮助!!