I'm currently trying to develop an AngularJS app. This is my first application using AngularJS and I think I'm pretty aware of how it works since I've been a Silverlight developer for some years :-)
However, there's one, simple thing I cannot figure out: how to get the initial data for the app when it starts.
What I need is a simple table of data where a few fields can be edited inline (by dropdowns) My app structure is like this:
app.js
var app = angular.module('feedbackApp', []);
feedbackService.js
app.service('feedbackService', function ($http) {
this.getFeedbackPaged = function (nodeId, pageNumber, take) {
$http.get('myUrl', function (response) {
return response;
});
};
});
feedbackController.js
app.controller('feedbackController', function ($scope, feedbackService, $filter) {
// Constructor for this controller
init();
function init() {
$scope.feedbackItems = feedbackService.getFeedbackPaged(1234, 1, 20);
}
});
Markup
<html ng-app="feedbackApp">
<head>
<script src=".10.1.min.js"></script>
<script src=".0.7/angular.min.js"></script>
</head>
<body>
<table class="table" style="border: 1px solid #000; width:50%;">
<tr ng-repeat="fb in feedbackItems | orderBy: 'Id'" style="width:auto !important;">
<td data-title="Ansvarlig">
{{ fb.Name }}
</td>
<td data-title="Kommentar">
{{ fb.Comment }}
</td>
</tr>
</table>
</body>
But the table is empty when I run the application. I think it's because the app starts before the data from the service is added to the viewmodel ($scope), but I have no idea of how to make it initialise before the app starts, so the first 20 table rows are displayed.
Does anyone know how to do this?
Thanks in advance!
I'm currently trying to develop an AngularJS app. This is my first application using AngularJS and I think I'm pretty aware of how it works since I've been a Silverlight developer for some years :-)
However, there's one, simple thing I cannot figure out: how to get the initial data for the app when it starts.
What I need is a simple table of data where a few fields can be edited inline (by dropdowns) My app structure is like this:
app.js
var app = angular.module('feedbackApp', []);
feedbackService.js
app.service('feedbackService', function ($http) {
this.getFeedbackPaged = function (nodeId, pageNumber, take) {
$http.get('myUrl', function (response) {
return response;
});
};
});
feedbackController.js
app.controller('feedbackController', function ($scope, feedbackService, $filter) {
// Constructor for this controller
init();
function init() {
$scope.feedbackItems = feedbackService.getFeedbackPaged(1234, 1, 20);
}
});
Markup
<html ng-app="feedbackApp">
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<table class="table" style="border: 1px solid #000; width:50%;">
<tr ng-repeat="fb in feedbackItems | orderBy: 'Id'" style="width:auto !important;">
<td data-title="Ansvarlig">
{{ fb.Name }}
</td>
<td data-title="Kommentar">
{{ fb.Comment }}
</td>
</tr>
</table>
</body>
But the table is empty when I run the application. I think it's because the app starts before the data from the service is added to the viewmodel ($scope), but I have no idea of how to make it initialise before the app starts, so the first 20 table rows are displayed.
Does anyone know how to do this?
Thanks in advance!
Share Improve this question asked Sep 11, 2013 at 17:57 bomortensenbomortensen 3,39610 gold badges57 silver badges77 bronze badges 3 |1 Answer
Reset to default 19You should modify your code a bit to make it working since you are working with promise here you should use .then
app.service('feedbackService', function($http) {
this.getFeedbackPaged = function(nodeId, pageNumber, take) {
return $http.get('myUrl');
};
});
app.controller('feedbackController', function($scope, feedbackService, $filter) {
// Constructor for this controller
init();
function init() {
feedbackService.getFeedbackPaged(1234, 1, 20).then(function(data) {
$scope.feedbackItems = data;
});
}
});
ng-initdirective, might be worth looking at. Is the table eventually getting populated or always blank? – tymeJV Commented Sep 11, 2013 at 18:00promiseover! – tymeJV Commented Sep 11, 2013 at 18:10