CODEWITHSUNDEEP
javascriptangularjs
ClassCastException
ClassCastException

Reputation: 1473

In AngularJS, How to update view after model is updated?

In below snippet, two variables $scope.recordList & $scope.recordList2 have exactly same values. $scope.recordList2 has been set static values, $scope.recordList is updated after receiving response from server. statements $scope.recordList & $scope.recordList2 render same values, $scope.recordList renders after receiving response.

Finally there are two smart tables (https://github.com/lorenzofox3/Smart-Table). $scope.recordList2 bases tables works as expected. $scope.recordList based table doesn't work as expected.

In AngularJS, how to update the view after the model is updated?

<div ng-app="smartTableApp" ng-controller="smartTableController">
    <script>  
        angular.module('smartTableApp', [ 'AngularJSRemoting','smartTableApp.controllers', 'smartTable.table']);
        angular.module('smartTableApp.controllers', []).controller('smartTableController', function($scope, jsr) {

        jsr.Call('appController.query', '{!soql}').then(function(response) {
            $scope.recordList = response;
            //$scope.$apply() ; uncommenting this gives "$digest already in progress" error
        },function(err){
            console.log(err);
        });

        $scope.recordList2=[{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt6yAAA"},"Name":"Stella Pavlova","Phone":"(212) 842-5500","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt6yAAA"},{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt6zAAA"},"Name":"Lauren Boyle","Phone":"(212) 842-5500","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt6zAAA"},{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt70AAA"},"Name":"Babara Levy","Phone":"(503) 421-7800","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt70AAA"},{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt71AAA"},"Name":"Josh Davis","Phone":"(503) 421-7800","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt71AAA"},{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt72AAA"},"Name":"Jane Grey","Phone":"(520) 773-9050","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt72AAA"}] ;

    });
    </script>   
    <br/>----------recordList----------<br/><!-- Shows expected values -->
    {{recordList}}
    <br/>----------recordList2----------<br/><!-- Shows expected values -->
    {{recordList2}}
    <br/><br/>
    <smart-table rows="recordList" ></smart-table><br/><br/><!-- table is NOT rendered -->
    <smart-table rows="recordList2" ></smart-table><br/><br/><!-- table is rendered -->       
</div>

Upvotes: 0

Views: 496

Answers (1)

Marc Kline
Marc Kline

Reputation: 9409

The problem is not that Angular isn't updating the view. In fact, you indicate in your code sample that it is updating it:

<br/>----------recordList----------<br/><!-- Shows expected values -->
{{recordList}}

I don't have experience with Smart-Table, but I did find this issue reported on GitHub, which describes a similar problem to yours. The author of the module did reply and suggests initializing the tables with just column configs in order to avoid the issue (which he describes as a bug).

So, if you know of the structure of the data prior to querying, you should initialize your table with column data.

Upvotes: 1

Related Questions