时间戳

首页 > 解决方案 > 如何在展开可折叠 div 时调用 API 并使用 AngularJS 用 API 响应填充其内容？

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

问题描述

我正在使用 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. 但是我不知道如何填充API扩展内容内部的响应span。

知道如何做到这一点吗？

标签： javascriptangularjs

解决方案

您可以将响应分配给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>

推荐阅读