Reload ng-repeat angular / ionic

Question

I already read some discussions about this problem but no one works for me.

I have a controller

.controller('TestFriendCtrl', ['$scope', 'APIUser', function($scope, APIUser) {

        $scope.data.friends = [{username: 'test'}];

        $scope.change = function(friend) {
            APIUser.find(friend, function(success, data){
                if (success) {
                    $scope.data.friends = data;
                    console.log($scope.data.friends);
                }
            })
        }
    }]);

I also tried

.controller('TestFriendCtrl', ['$scope', '$timeout', 'APIUser', function($scope, $timeout, APIUser) {

    $scope.friends = [{username: 'coucou'}];

    $scope.change = function(friend) {
        APIUser.find(friend, function(success, data){
            if (success) {
                $timeout(function() {
                    $scope.friends = data;
                    console.log($scope.friends);
                } );
            }
        })
        console.log($scope.friends);
    }
}]);

and

.controller('TestFriendCtrl', ['$scope', '$timeout', 'APIUser', function($scope, $timeout, APIUser) {

    $scope.friends = [{username: 'coucou'}];

    $scope.change = function(friend) {
        APIUser.find(friend, function(success, data){
            if (success) {
                $scope.friends = angular.copy(data);
            }
        })
        console.log($scope.friends);
    }
}]);

In all cases console.log($scope.friends); return the expected value

And a view

<ion-view class="main-page">
    <ion-content>
        <h1>Friend</h1>
        <label class="item item-input">
            <i class="icon ion-search placeholder-icon"></i>
            <input ng-model="friend" name="friend" type="search" placeholder="Search" ng-change="change(friend)">
        </label>
        {{ data.friends[0].username }}
        <ion-list ng-controller="TestFriendCtrl" >
            <ion-item ng-repeat="friend in data.friends" class="item-thumbnail-left">
                <p>{{friend.username}}</p>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

the $scope.friend is well updated in the console output but my list does not change.

I tried to add $scope.$apply but I have $digest already in progress

$scope.$apply shall NEVER be used. You have to wrap your code into $timeout(function(){ $scope.friends = data; } ); — aorfevre, Jun 25 '15 at 12:04
try to copy the value of `data` by using : `$scope.friends = angular.copy(data)` . I am pretty sure there is just a bind between $scope.friend and data with the way you are doing it, then data is deleted when you go out of the callback. That's why you need to copy the value instead of binding it — Romf7890, Jun 25 '15 at 12:06
I tried both solutions but, doesn't works (I updated the message code) — Ajouve, Jun 25 '15 at 12:58
Thanks all, I find the error, I removed `ng-controller="TestFriendCtrl"` and now it's works — Ajouve, Jun 25 '15 at 14:36

score 0 · Answer 1 · answered Jun 25 '15 at 12:11

You could try this, while I don't know what APIUser does:

.controller('TestFriendCtrl', ['$scope', 'APIUser', function($scope, APIUser) {
    $scope.friends = [{username: 'test'}];

    $scope.change = function(friend) {
        APIUser.find(friend).$promise.then(function(success, data){
            if (success) {
                $scope.friends = data;
                console.log($scope.friends);
            }
        }, function (err) {
            console.log(err);
        )};
    }
}]);

score 0 · Answer 2 · answered Jun 25 '15 at 14:12

Following your latest update, I assume that may have a link to the . (dot). There is plenty of post easily foundable in google explaining why it is not goot to have a direct model without a .dot dilimiter.

Try to change your model with $scope.myDatas.friends = data; and change your ng-repeat call to ng-repeat="friend in myDatas.friends"

score 0 · Answer 3 · edited May 23 '17 at 12:29

The comment suggesting angular.copy() was almost correct, it was just missing the second parameter. Using angular.copy() (or similarly Lodash's _.assign()) you wont lose the reference to the original array instance. See this answer or this answer for further explanation.

.controller('TestFriendCtrl', ['$scope', 'APIUser', function($scope, APIUser) {
    $scope.friends = [{username: 'test'}];

    $scope.change = function(friend) {
        APIUser.find(friend).$promise.then(function(success, data){
            if (success) {
                angular.copy(data, $scope.friends);
                console.log($scope.friends);
            }
        }, function (err) {
            console.log(err);
        )};
    }
}]);

Reload ng-repeat angular / ionic

3 Answers3