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

Question

我在用角js1.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。知道如何做到这一点吗？

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>