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

Question

我是angel的新手，希望为解决以下问题提供帮助。 这是我目前拥有的代码，只需使用发布请求从服务器获取结果数组，并使用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>

这是我的控制器：

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 query，它将结果数组加载到“ 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>

Answer 2

首先，您应该在控制器中具有一个名为loadSubMedias的函数 ，而不是简单地使用media.id，您可以向其发送整个媒体对象（此后，我们会将新数据作为另一个属性添加到该对象中）。

$scope.loadSubMedias = function (media) {
    $http({
        method: 'POST',
        url: 'media.php',
        data: $httpParamSerializerJQLike({"mediaId":media.id}),
        headers: {'Content-Type':'application/x-www-form-urlencoded'}
    }).then(function (response) {
        // now add subDatas into main data Object
        media.subMedias = response.data;
    });
}

并在您的控制器中像这样使用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)">load sub medias</div>
        <div id="subMediaW" ng-repeat="subMedia in media.subMedias">
             <pre>{{subMedia | json}}</pre>
        </div>

    </div>
</div>