Change only an element on update AngularJS

Question

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.

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? — Tony Barnes, Apr 20 '15 at 09:59
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 '15 at 10:05
Hmm i'm not sure about this one. Maybe some combination of `$scope.$watch` and a timeout for calling the API could work. — Tony Barnes, Apr 20 '15 at 10:10
Have a look here: http://stackoverflow.com/questions/17079541/angularjs-ng-repeat-with-dynamic-list-without-rebuilding-entire-dom-tree — Sonata, Apr 20 '15 at 12:48

Change only an element on update AngularJS

0 Answers0