CODEWITHSUNDEEP
angularjs
Manish Kumar
Manish Kumar

Reputation: 10502

Ng-repeat start from the next index rather than always from zero

I have this html 

<div class="list card" ng-repeat="comment in allComments">
       <content>
</div>

$scope.allComments.push(d.data[i]);

The problem is every time a new element is added to allComments ng-repeat start looping from 0. How can i keep appending element to div whenever a new entry is pushed to the array instead of looping from 0 everytime.

Let say first time i push 5 record in allComments then ng-repeat will start from allComments[0] to allComments[4] and will display 5 content. So it will be something like:

<div class="list card">
       <content ..0>
       <content ..1>
       <content ..2>
       <content ..3>
       <content ..4>
</div>

next time again i pushed 5 record in allComments then ng-repeat will start from allComments[0] to allComments[9] and will wipe out all content inside div and will re-render 10 content.

<div class="list card">
       <content ..0>
       <content ..1>
       <content ..2>
       <content ..3>
       <content ..4>
       <content ..5>
       <content ..6>
       <content ..7>
       <content ..8>
       <content ..9>
</div>

so what i want is this time it should start from allComments[5] to allComments[9] and keep appending the <content> rather than completely rendering the content inside div

Upvotes: 2

Views: 312

Answers (2)

Fridjon Gudjohnsen
Fridjon Gudjohnsen

Reputation: 827

If you have an id property on your allComments object then you can use ng-repeat track by to do exactly this.

Your HTML should then look like:

div class="list card" ng-repeat="comment in allComments track by comment.id">
   <content>
</div>

Upvotes: 1

Don
Don

Reputation: 102

You can check my plnkr for more insight

<!DOCTYPE html>
<html ng-app="app">
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="app.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/css/datepicker.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
</head>

<body ng-controller="AppCtrl">
      <span ui-date="opts" ng-change="fromdatepickers(calDate)" ng-model="calDate" readonly=""></span>

  <br>
  <br>
  <br>
  <div style="width: 150px;height: 150px;overflow: scroll;">
    <table>
      <tr ng-repeat="d in frompickers" ng-model="selectedDate" ng-change="fromdatepickers(calDate)">
        <td>{{d | date : 'dd-MM-yyyy'}}
          <button ng-click='remove($index)'>x </button>
        </td>
      </tr>
    </table>
  </div>
  <br>
  <button ng-click="reset()">clear</button>
</body>

</html>

Upvotes: 1

Related Questions