Question

我有一个AngularJS控制器;在第一次加载时，数据不从db

获取

＆＃13;

app.controller("ProductPopupController", function ($scope, $http, $mdDialog, $filter) {
    console.log("ProductPopupController");

    var allGroups = [];
    $http.get('UserDetail/GetAllUsers').success(function (response) {
        console.log("I got the data I requested");
        //console.log(response);
        for (var i = 0; i < response.length; i++) {
            allGroups.push({
                UserName: response[i].UserName,
                _id: response[i]._id
            });
        }
    });


    console.log(allGroups);

    var allGroups = [
                    { 'UserName': 'one', '_id': 1 },
                    { 'UserName': 'two', '_id': 2 },
                    { 'UserName': 'three', '_id': 3 },
                    { 'UserName': 'four', '_id': 4 },
                    { 'UserName': 'five', '_id': 5 },
                    { 'UserName': 'six', '_id': 6 },
                    { 'UserName': 'sixteen', '_id': 7 },
                    { 'UserName': 'seven', '_id': 8 }

                ];

    console.log(allGroups);

＆＃13;

在这段代码中，我从第二个数组中获取值。没有从数据库获取。在任何事件之后它将从db加载。我在这里做错了什么？

Answer 1

这种情况正在发生，因为$http.get()是异步的。您正在拨打$http.get()，然后在检索到结果之前立即拨打console.log(allGroups)。

一旦检索到数据并且.success()触发，Angular就会触发一个摘要周期，导致数据更新并被推送到数组中。但是，这在控制器完成后很久就会发生，因此数据永远不会打印在console.log()。

中

Answer 2

请注意$http.get('UserDetail/GetAllUsers')是异步调用。在收到请求的回复之前，您打印出变量allGroups。如果您在console.log函数末尾添加success，则会看到数据已设置。

Answer 3

这是我使用md-qutocomplete加载md-chips（Angular素材）的完整代码

app.controller("ProductPopupController", function ($scope, $http, $mdDialog, $filter) {
    console.log("ProductPopupController");

    var allGroups = [];
    $http.get('UserDetail/GetAllUsers').success(function (response) {
        console.log("I got the data I requested");
        for (var i = 0; i < response.length; i++) {
            allGroups.push({
                UserName: response[i].UserName,
                _id: response[i]._id
            });
        }
        console.log(1);
        console.log(allGroups);
    });

    console.log(2);
    

    var allGroups = [
                    { 'UserName': 'one', '_id': 1 },
                    { 'UserName': 'two', '_id': 2 },
                    { 'UserName': 'three', '_id': 3 },
                    { 'UserName': 'four', '_id': 4 },
                    { 'UserName': 'five', '_id': 5 },
                    { 'UserName': 'six', '_id': 6 },
                    { 'UserName': 'sixteen', '_id': 7 },
                    { 'UserName': 'seven', '_id': 8 }

    //            'one',
    //            'two',
    //            'three',
    //            'four',
    //            'five',
    //            'six',
    //            'sixteen',
    //            'seven'
                ];

    console.log(allGroups);

    $scope.queryGroups = function (search) {
        var firstPass = $filter('filter')(allGroups, search);

        return firstPass.filter(function (item) {
            return $scope.selectedGroups.indexOf(item) === -1;
        });
    };

    $scope.addGroup = function (group) {
        $scope.selectedGroups.push(group);
    };

    $scope.allGroups = allGroups.UserName;
    $scope.selectedGroups = [allGroups[0]];

    $scope.$watchCollection('selectedGroups', function () {
        $scope.availableGroups = $scope.queryGroups('');
    });

    $scope.getChipInfo = function (chip_info) {
        console.log(chip_info);
    }

如何在控制加载时在AngularJS中加载数据？

3 个答案: