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

AngularJS load ng-repeat into another ng-repeat with ajax call

本文关键字：ng-repeat 加载 另一个 通过 ajax 调用 AngularJS      更新时间：2023-09-26

我是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>

这是我的控制器

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做到这一点吗?

试试这个，

$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>

首先，你应该有一个函数在你的控制器与名称loadSubMedias，而不是简单地采取媒体。你可以将整个媒体对象发送给它(稍后我们会将新数据作为另一个属性添加到该对象中)。

$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>
相关文章：