Vincent Fu February 2016

ng-repeat doesn't refresh DOM

I'm using ng-repeat to build a datatable, but DOM doesn't refresh after getting new json data. As shown in the picture below, when clicking the folder, I can get the right Json data, but just doesn't update in the view. when I use $scope.$apply(), get the error "digest already in progress" Here is part of my code

HTML:

<tr ng-repeat="x in ::applicationimages" ng-click="rowSelect($index)" ng-class="{'selected': selectedRows.indexOf($index) != -1}">
     <td layout="row" layout-align="start center">
        <span>
        {{x.type}}
        </span>
        <a ng-class="{'folder': x.type == 'folder', 'image': x.type == 'image'}" ng-click="getInfo($index); $event.stopPropagation()">
        </a>
      </td>
      <td>
      {{x.name}}
      </td>
 </tr>

controller:

        /*initial json data*/

       $http({
            method: 'GET',
            url: '/services/images/'
        }).then(function(response) {

            $scope.applicationimages = response.data.payload.list;

        },function(response) {

            console.log('error');
        })


     /*get new json when clicking folder*/

    $scope.getInfo = function(index) {

    if($scope.applicationimages[index].type == 'folder') {
        $http({
            method: 'GET',
            url: '/services/images/' + $scope.applicationimages[index].name
        }).then(function(response) {

          $scope.$apply(function(){
                $scope.applicationimages = response.data.payload.list;
                })

        }, function(response) {

            console.log('error');
        })                           
    } 
}

enter image description here

Answers


Louie Almeda February 2016

you are using bind once in your ng-repeat. So even if applicationimages changes, it is not re-rendered in your template. remove the :: like this

<tr ng-repeat="x in applicationimages" ng-click="rowSelect($index)" ng-class="{'selected': selectedRows.indexOf($index) != -1}">
     <td layout="row" layout-align="start center">
        <span>
        {{x.type}}
        </span>
        <a ng-class="{'folder': x.type == 'folder', 'image': x.type == 'image'}" ng-click="getInfo($index); $event.stopPropagation()">
        </a>
      </td>
      <td>
      {{x.name}}
      </td>
 </tr>

Post Status

Asked in February 2016
Viewed 1,988 times
Voted 11
Answered 1 times

Search




Leave an answer