CODEWITHSUNDEEP
javascriptjqueryangularjsangularjs-scopeangularjs-ng-repeat
SenthilKumarM
SenthilKumarM

Reputation: 119

AngularJS scope not binding data in ng-repeat

I am developing a single page application which retrieves blog feeds from a website. I got JSON using jQuery AJAX, and assigned the value to the "$scope.entries" variable, but its not reflecting the changes in View.

Since AngularJS is a two way data binding I guess the data must be binded automatically,

Here is the code, 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
        var myApp = angular.module("myApp", []);
        myApp.controller('picCtrl', function ($scope, myservice) {
            $scope.entries = [];
            $scope.message = "Welcome";

            myservice.jsonNews().then(loadData);
            function loadData(data) {
                //Data Loaded from AJAX Call
                debugger;
                console.log(data);
                angular.forEach(data.entry, function (entryX) {
                    $scope.entries.push(entryX);
                })
            };
        });

        myApp.service('myservice', function ($http, $q) {
            return ({
                jsonNews: jsonNews
            });
            function jsonNews() {
                var BlogFeeds = "//www.blogger.com/feeds/7833828309523986982/posts/default?start-index=0001&max-results=10&alt=json";
                var request = $.ajax({ url: BlogFeeds, dataType: 'jsonp' });

                return (request.then(handleSuccess));
            }
            function handleSuccess(response) {
                return (response.feed);
            }
        });

    </script>

</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="picCtrl">
            {{message}}
            <span ng-repeat="entry in entries">
                <span >
                    <img ng-src="{{entry.media$thumbnail.url}}" />
                    {{entry.title.$t}}
                </span>
            </span>


        </div>
    </div>

</body>
</html>

loadData() loads data which is loaded using Angular services. Now when I assign the data to $scope.entries variable, it is not binding automatically.

am I missing something here ?

Upvotes: 1

Views: 2839

Answers (1)

rajeshwerkushwaha
rajeshwerkushwaha

Reputation: 311

Angular use two way binding but the case you mentioned in this case the $scope.entires array looses its scope in controller when you try to push items into it.

The better approach is to do this thing using $http service and all the things should do into myservice service. In this way code is more usable, readable and loosely coupled.

I have done in this way. May be it helps you. If you find any other approach please post it.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Http Jsonp Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
        var myApp = angular.module("myApp", []);

        myApp.service('myservice', ['$http', '$q', function ($http, $q) {
            var entries = [];

            function getData(){
                var arr1 = [];
                var BlogFeeds = "//www.blogger.com/feeds/7833828309523986982/posts/default?start-index=0001&max-results=10&alt=json&callback=JSON_CALLBACK";

                $http.jsonp(BlogFeeds)
                .success(function(data){
                    angular.forEach(data.feed.entry, function(entryX){
                        arr1.push(entryX);
                    });
                    angular.copy(arr1, entries);
                })
                .error(function (data) {
                    $scope.data = "Request failed";
                });
            }

            return {
                getData: getData,
                entries: entries
            };

        }]);


        myApp.controller('picCtrl', function ($scope, myservice) {

            $scope.message = "Welcome";
            $scope.entries = myservice.entries;

            myservice.getData();

        });

    </script>

</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="picCtrl">
            {{message}}
            <span ng-repeat="entry in entries">
                <span >
                    <img ng-src="{{entry.media$thumbnail.url}}" />
                    {{entry.title.$t}}
                </span>
            </span>
        </div>
    </div>
</body>
</html>

Upvotes: 3

Related Questions