jQuery 在 angularjs 应用程序中加载初始数据

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18748115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 22:24:45  来源:igfitidea点击:

Load initial data in an angularjs app

javascriptjqueryangularjs

提问by bomortensen

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 :-)

我目前正在尝试开发一个 AngularJS 应用程序。这是我第一个使用 AngularJS 的应用程序,我想我很清楚它是如何工作的,因为我已经做了多年的 Silverlight 开发人员:-)

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

应用程序.js

var app = angular.module('feedbackApp', []);

feedbackService.js

反馈服务.js

app.service('feedbackService', function ($http) {
this.getFeedbackPaged = function (nodeId, pageNumber, take) {
    $http.get('myUrl', function (response) {
        return response;
    });
};
});

feedbackController.js

反馈控制器.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.

但是当我运行应用程序时表是空的。我认为这是因为应用程序在将来自服务的数据添加到视图模型 ($scope) 之前启动,但我不知道如何在应用程序启动之前对其进行初始化,因此显示了前 20 个表行。

Does anyone know how to do this?

有谁知道如何做到这一点?

Thanks in advance!

提前致谢!

回答by Ajay Beniwal

You should modify your code a bit to make it working since you are working with promise here you should use .then

您应该稍微修改您的代码以使其工作,因为您在这里使用 promise,您应该使用 .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;});
}
});