如何在展开可折叠 div 时调用 API 并使用 AngularJS 用 API 响应填充其内容？

Question

我正在使用 angularjs 1.6，我对它还很陌生。我下面有这篇html

<span ng-repeat="topdata in userData">
  <span style="white-space: pre;">
    <a class="collapsed" data-target="#testThis" data-toggle='collapse' ng-click="getInfo(topdata.user_id)">
      <pre><i class='fa fa-plus'></i><span>Some text</span> </pre>
    </a>
  </span>
  <div id="testThis" class='collapse'>
    <!-- API content goes here -->
  </div>
</span>

在js部分

$scope.getInfo = function(user_id) {
    toSend = {"user_id": user_id}
    $http({
          method: 'POST',
          url: /some-url,
          data: toSend,
     }).then(function(response) {
        // fill the response data inside #testThis div
     })
}

当前，当用户单击 collapsible span 时，它会展开并调用调用 API 的函数。但是我不知道如何在扩展的 span.

内容中填充 API 的响应

知道如何做到这一点吗？

Answer 1

您可以将响应分配给 userData 并将折叠的元素绑定到它。

例如

<div id="testThis" class='collapse' ng-bind="userData.more"></div>

和

}).then(function(response) {
  const userData = $scope.userData.find(data => data.user_id === user_id);
  userData.more = response;
});

这是一个实际示例（我做了一些必要的更改以使其工作，但想法是一样的）。

angular.module('app', []).controller('ctrl', function($scope, $http) {
  $scope.userData = [{
    user_id: 8
  }];
  
  $scope.getInfo = function(user_id) {
    toSend = {
      "user_id": user_id
    }
    $http({
      method: 'GET',
      url: 'https://jsonplaceholder.typicode.com/todos/1',
      //data: toSend,
    }).then(function(response) {
      const userData = $scope.userData.find(data => data.user_id === user_id);
      userData.more = response;
    })
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <span ng-repeat="topdata in userData">
  <span style="white-space: pre">
    <a
      class="collapsed"
      data-target="#testThis"
      data-toggle="collapse"
      ng-click="getInfo(topdata.user_id)"
    >
      <pre><i class='fa fa-plus'></i><span>Some text</span></pre>
  </a>
  </span>

  <div id="testThis" class="collapse" ng-bind="topdata.more | json">
    <!-- API content goes here -->
  </div>
  </span>
</div>

如何在展开可折叠 div 时调用 API 并使用 AngularJS 用 API 响应填充其内容？

How to call an API on expansion of a collapsible div and fill its content with the API response using AngularJS?

javascript

angularjs