Question

这是我的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.

Answer 1

试试这个，但仅在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);
     });
}

如何使用angularJS在同一页面中添加条目，而不使用数组来存储以前的条目

1 个答案: