2

I have an array of objects that can change depending on the data that returns an API and I want to change only the changed elements without reload the entire ng-repeat

Edit(Trying to explain me): When data changes AngularJS recreate the entire DOM removing all the elements and creating it again, I want to keep the elements that have not changed and just reload new ones.

Here is how I show the data:

   <div class="row" id="main">
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 block animate" ng-repeat="build in build | limitTo:totalDisplayed | orderBy:'lastBuildDetails.startDate' : true track by build._id" ng-class="{'running': project.running ,'block-green': build._status ==='SUCCESS','block-red': build._status==='FAILURE'}" id="{{build._id}}" progressive-loading="">
        <div class="title-container animate">
          <p>{{build._buildTypeId}}</p> 
        </div>
        <div class="update-container animate col-xs-12">
          <time class="time">{{build.buildDate | date : 'dd.MM.yyyy H:mm:s'}} </time>
        </div>
      </div>
    </div>

Here is an example array :

     $scope.build = [
    { _id:1, _status:'SUCCESS', lastBuildDetails:{startDate:1}, _buildTypeId:1},
    { _id:2, _status:'SUCCESS', lastBuildDetails:{startDate:1}, _buildTypeId:2},
    { _id:3, _status:'SUCCESS', lastBuildDetails:{startDate:9}, _buildTypeId:3},
    { _id:4, _status:'SUCCESS', lastBuildDetails:{startDate:8}, _buildTypeId:4},
    { _id:5, _status:'SUCCESS', lastBuildDetails:{startDate:1}, _buildTypeId:5},
    { _id:6, _status:'SUCCESS', lastBuildDetails:{startDate:6}, _buildTypeId:6},
    { _id:7, _status:'SUCCESS', lastBuildDetails:{startDate:5}, _buildTypeId:7},
    { _id:8, _status:'SUCCESS', lastBuildDetails:{startDate:4}, _buildTypeId:8},
    { _id:9, _status:'SUCCESS', lastBuildDetails:{startDate:3}, _buildTypeId:9},
    { _id:10, _status:'SUCCESS', lastBuildDetails:{startDate:2}, _buildTypeId:10}
    ];

And here and example from a different elements response from API:

     $scope.build = [
    { _id:11, _status:'SUCCESS', lastBuildDetails:{startDate:1}, _buildTypeId:11},
    { _id:2, _status:'FAILED', lastBuildDetails:{startDate:1}, _buildTypeId:2},
    { _id:13, _status:'SUCCESS', lastBuildDetails:{startDate:9}, _buildTypeId:13},
    { _id:4, _status:'SUCCESS', lastBuildDetails:{startDate:8}, _buildTypeId:4},
    { _id:15, _status:'FAILED', lastBuildDetails:{startDate:1}, _buildTypeId:15},
    { _id:6, _status:'SUCCESS', lastBuildDetails:{startDate:6}, _buildTypeId:6},
    { _id:17, _status:'SUCCESS', lastBuildDetails:{startDate:5}, _buildTypeId:17},
    { _id:8, _status:'FAILED', lastBuildDetails:{startDate:4}, _buildTypeId:8},
    { _id:19, _status:'SUCCESS', lastBuildDetails:{startDate:3}, _buildTypeId:19},
    { _id:20, _status:'FAILED', lastBuildDetails:{startDate:2}, _buildTypeId:10}
    ];

Sorry for my English, if you do not understand me or need more information, please let me know.

7
  • What do you mean exactly by 'I want to change only the changed elements'? - What do you want to change? Do you mean, update the view? Apr 20, 2015 at 9:59
  • What's the problem with updating the ng-repeat?
    – camden_kid
    Apr 20, 2015 at 10:03
  • As you can see in the two array some positions have different values and other not, when data changes AngularJS recreate the entire DOM removing all the elements and creating it again, I want to keep the elements that have not changed and just reload new ones.
    – Vistor
    Apr 20, 2015 at 10:05
  • 1
    Hmm i'm not sure about this one. Maybe some combination of $scope.$watch and a timeout for calling the API could work. Apr 20, 2015 at 10:10
  • 1
    Have a look here: stackoverflow.com/questions/17079541/…
    – Sonata
    Apr 20, 2015 at 12:48

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.