javascript - AngularJS 使用 ajax 调用将 ng-repeat 加载到另一个 ng-repeat

Question

我是 Angular 的新手，希望得到一些帮助来解决以下问题。这是我目前拥有的代码，只需使用 post 请求从服务器获取一组结果并使用 ng-repeat 指令显示它们:

<div id="mainW" ng-controller="MediaController">

    <div id="mediaBodyW" ng-repeat="media in medias">
        <div class="mediaW" data-id="{{media.id}}">
        <div class="mediaNum">{{media.num}}</div>
        <div class="mediaN">{{media.name}}</div>

        <div id="loadSubs" ng-click="loadSubMedias(media.id)">load sub medias</div>
        <div id="subMediaW"></div>

    </div>
</div>

这是我的 Controller :

app.controller("MediaController",['$scope','$http','$httpParamSerializerJQLike',function($scope,$http,$httpParamSerializerJQLike){

    $scope.medias = [];

    try {
        $http({
            method: 'POST',
            url: 'media.php',
            data: $httpParamSerializerJQLike({"request":"getAllMedia"}),
            headers: {'Content-Type':'application/x-www-form-urlencoded'}
        }).then(function (ans) {
            $scope.medias = ans.data;
        }, function (error) {
            console.error(JSON.stringify(error));
        });
    }
    catch (ex) {
        console.error("Error: " + ex.toString());
    }
}]);

现在，我想要实现的是:单击 ID 为“loadSubs”的 div，运行另一个 $http post 查询，它将结果数组加载到“subMediaW”中。当然，对于每个媒体元素，html 的查询和附加应该是唯一的，并且每次为特定元素加载数据时，所有以前的结果都应该被清除，同时考虑到加载的数据也会在未来。

有人可以帮助我了解如何使用 AngularJS 执行此操作吗？

Answer 1

试试这个，

$scope.prevMedia = null; //use this to store last clicked media object

$scope.loadSubMedias = function(media){
  $http.post().... //make api call for subMedia here
  .then(function(res){
      media.subMediaW = res.data // attach a subMediaW array to the media object
      media.showSubMedia = true; // set variable true to make submedia visible for current media object, this will be used with ng-if attribute in html
      if($scope.prevMedia != null) $scope.prevMedia.showSubMedia = false; // if last selected media object is not null, hide its submedia
   })
}

和html

<div id="mainW" ng-controller="MediaController">

  <div id="mediaBodyW" ng-repeat="media in medias">
    <div class="mediaW" data-id="{{media.id}}">
    <div class="mediaNum">{{media.num}}</div>
    <div class="mediaN">{{media.name}}</div>

    <div id="loadSubs" ng-click="loadSubMedias(media)">load sub medias</div>
    <div id="subMediaW" ng-repeat="submedia in media.subMediaW" ng-if="media.showSubMedia"></div>

  </div>
</div>