如何使用 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) {&nbsp; const userData = $scope.userData.find(data => data.user_id === user_id);&nbsp; userData.more = response;});这是一个实例（我做了一些必要的更改以使其工作，但想法是相同的）。angular.module('app', []).controller('ctrl', function($scope, $http) {&nbsp; $scope.userData = [{&nbsp; &nbsp; user_id: 8&nbsp; }];&nbsp;&nbsp;&nbsp; $scope.getInfo = function(user_id) {&nbsp; &nbsp; toSend = {&nbsp; &nbsp; &nbsp; "user_id": user_id&nbsp; &nbsp; }&nbsp; &nbsp; $http({&nbsp; &nbsp; &nbsp; method: 'GET',&nbsp; &nbsp; &nbsp; url: 'https://jsonplaceholder.typicode.com/todos/1',&nbsp; &nbsp; &nbsp; //data: toSend,&nbsp; &nbsp; }).then(function(response) {&nbsp; &nbsp; &nbsp; const userData = $scope.userData.find(data => data.user_id === user_id);&nbsp; &nbsp; &nbsp; userData.more = response;&nbsp; &nbsp; })&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script><div ng-app="app" ng-controller="ctrl">&nbsp; <span ng-repeat="topdata in userData">&nbsp; <span style="white-space: pre">&nbsp; &nbsp; <a&nbsp; &nbsp; &nbsp; class="collapsed"&nbsp; &nbsp; &nbsp; data-target="#testThis"&nbsp; &nbsp; &nbsp; data-toggle="collapse"&nbsp; &nbsp; &nbsp; ng-click="getInfo(topdata.user_id)"&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <pre><i class='fa fa-plus'></i><span>Some text</span></pre>&nbsp; </a>&nbsp; </span>&nbsp; <div id="testThis" class="collapse" ng-bind="topdata.more | json">&nbsp; &nbsp; <!-- API content goes here -->&nbsp; </div>&nbsp; </span></div>