Hello,

I am learning AngularJS and I have encountered an issue I can't pass by.

I am writing a small test page that retrieves some data from a RESTful API 
I have previously written.

I can successfully retrieve this data from Angular, but I can't seem to 
find a way to display this data on the page. I am trying to loop over the 
list of results and print it in a table.

This is my index.html:

<!DOCTYPE html><html>
    <head>
        <title>AngularJS</title>

        <meta http-equiv="Content-Type" content="text/html;charset=utf8" >

        <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">

        <script type="application/javascript" 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js";></script>

        <script type="application/javascript" src="./js/URLSet.js"></script>
        <script type="application/javascript" src="./js/app.js"></script>
    </head>
    <body ng-app="MyApp">
        <div ng-controller="URLSetDAO as dao">
            <button class="btn" ng-click="dao.list()">List</button>
            <table class="table" ng-init="urlsets = dao.list()">
                <td ng-repeat="urlset in urlsets">
                    <tr>
                        {{ urlset.pk }}
                    </tr>
                    <tr>
                        {{ urlset.user }}
                    </tr>
                    <tr>
                        {{ urlset.title }}
                    </tr>
                    <tr>
                        {{ urlset.views}}
                    </tr>
                    <tr>
                        {{ urlset.type }}
                    </tr>
                </td>
            </table>
        </div>      
    </body></html>

This is the app.js:

(function() {
    var app = angular.module('MyApp', ['URLSet']);})();

And this is the URLSet.js:

(function() {
    var app = angular.module('URLSet', []);

    app.controller('URLSetDAO', ['$http', function($http){
        var ip = "http://localhost:8000";;
        var store = this;

        this.list = function() {
            return $http({method: 'GET', url: ip + '/urlsets/'})
                .success(function(data, status, headers, config) {
                    console.log(data);
                })
                .error(function(data, status, headers, config) {

                });
        };

        this.read = function(id) {
            $http({method: 'GET', url: ip + '/urlsets/' + id})
                ...
        };

        this.create = function(obj) {
            $http({method: 'POST', url: ip + '/urlsets/'})
                ...
        };

        this.update = function(id, obj) {
            $http({method: 'PUT', url: ip + '/urlsets/' + id})
                ...
        };

        this.remove = function(id) {
            $http({method: 'DELETE', url: ip + '/urlsets/' + id})
                ...
        };
  }]);})();

I understand that Promises work similarly to callbacks, so it's 
asynchronous. So how am I able to display this data, if ng-init will not 
wait for the function to finish?

-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply via email to