Question

我是棱角分明的新手，想要解决以下问题。这是我目前的代码，只需使用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做到这一点？

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>

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

2 个答案: