angularjs - How to get data from $http on the page? -
i learning angularjs , have encountered issue can't pass by.
i writing small test page retrieves data restful api have written.
i can retrieve data angular, can't seem find way display data on page. trying loop on list of results , print in table.
this 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 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 app.js:
(function() { var app = angular.module('myapp', ['urlset']); })(); and 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 promises work callbacks, it's asynchronous. how able display data, if ng-init not wait function finish?
edit:
besides fact inverted tr , td tags (thanks satish suggesting plunker, pointed me error), making table render invisible (so never see results on page), injected $scope controller.
it now:
... app.controller('urlsetdao', ['$http', '$scope', function($http, $scope){ var ip = "http://localhost:8000"; var store = this; this.list = function() { $http({method: 'get', url: ip + '/urlsets/'}) .success(function(data, status, headers, config) { $scope.urlsets = data; }) .error(function(data, status, headers, config) { }); }; ... and index.html:
<body ng-app="myapp"> <div ng-controller="urlsetdao dao"> <button class="btn" ng-click="dao.list()">list</button> <table class="table" ng-init="dao.list()"> <tr ng-repeat="urlset in urlsets"> <td> {{ urlset.pk }} </td> <td> {{ urlset.user }} </td> <td> {{ urlset.title }} </td> <td> {{ urlset.views}} </td> <td> {{ urlset.type }} </td> </tr> </table> </div> </body>
one way solve drop ng-init , in controller instead:
for example:
app.controller('urlsetdao', ['$http', '$scope', function($http, $scope){ 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.list().success(data) { $scope.urlsets = data; }); ... }); hope helps.
Comments
Post a Comment