javascript - 如何使用angularJS在同一页面中追加条目，而不使用数组存储先前的条目

这是我的html文件，从控制器获取数据。每次我按下加载按钮时，控制器通过增加偏移值从API获取新数据。

 <div class="container" ng-app="myApp" ng-controller="myctrl">
    <div class="row row-gap" ng-repeat="data in data">
        <div  class="media-left media-middle">
          <a href="#">
            <img class="media-object rounded" ng-src="{{data.thumbnail}}">
          </a>
        </div>
        <div class="media-body" >
          <table class="table table-striped">
            <tr>
               <td class="col-md-3"> <span class="glyphicon glyphicon-share-alt" aria-hidden="true">Name</span></td>
                <td class="col-md-9">{{data.title}}</td>
          </tr>
            <tr>
              <td class="col-md-3"> <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Place </td>
              <td class="col-md-9"> Star{{data.placeName}} </td>
               </tr>
                 <tr>
                    <td class="col-md-3"> <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Submitted On </td>
              <td class="col-md-9">{{data.createdOn |date }}</td>
               </tr>
           </table>
             <img ng-src="{{data.author.icon}}";alt="{{data.author.name}}";height=30px; width=30px  >
        </div>
      </div>

      <button  type="button"  ng-click="loadMore(count=count+1)"  class="btn btn-default">load More</button>

     </div>

容器代码如下。我知道我正在使用相同的数据变量来存储后续的查询结果。
我只希望每当我单击“加载更多”按钮时，在同一页中追加数据而不影响前面的值。

 var myApp=angular.module('myApp',[]);

myApp.controller('myctrl',function ($scope, $http) {

  $http({
        method: 'GET',
        url: 'API?max=10&offset=0&format=json'

     }).then(function (datacontent){
         $scope.data=datacontent.data.model.observationInstanceList;
        console.log(show);
     },function (error){
//console.log(error);
     });

$scope.count=0;
$scope.loadMore=function(value) {
value=value*10;
  $http({
        method: 'GET',
        url: 'http://API?max=10&offset='+value+'&format=json'

     }).then(function (dataco){
         $scope.data=dataco.data.model.observationInstanceList;

     },function (error){
//console.log(error);
     });
}

});

  I need answer in such a way, the array size doesnot increase much.

最佳答案

试试这个，但只在dataco.data.model.observationInstanceList是数组时有效。

$scope.data = $scope.data.length ? $scope.data.concat(dataco.data.model.observationInstanceList) : dataco.data.model.observationInstanceList;

更改代码如下

$scope.count=0;
$scope.loadMore=function(value) {
value=value*10;
  $http({
        method: 'GET',
        url: 'http://API?max=10&offset='+value+'&format=json'

     }).then(function (dataco){
         $scope.data = $scope.data.length ? $scope.data.concat(dataco.data.model.observationInstanceList) : dataco.data.model.observationInstanceList;

     },function (error){
//console.log(error);
     });
}

关于javascript - 如何使用angularJS在同一页面中追加条目，而不使用数组存储先前的条目，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44427113/