Menu
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!
978
AngularJS starts automatically when the web page has loaded. The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application. The ng-model directive binds the value of the input field to the application variable name.
It is recommended that you load the AngularJS library either in the HEAD or at the start of the BODY.
AngularJS directives are extended HTML attributes with the prefix ng- . The ng-app directive initializes an AngularJS application. The ng-init directive initializes application data. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
Scaffolding in Visual Studio allows you to generate a component that contains a DevExtreme UI component and a data service for the UI component. You can scaffold the DataGrid, TreeList, and Form.
You 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;});
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
