Javascript 使用ng repeat加载图像

我是Angular.js的新手，我正在尝试使用ng repeat和ng scope从txt文件加载名称和图像列表。然而；从txt文件加载后，它似乎无法读取数组。我不确定它为什么会这样做，因为根据我的研究，ng scope可以从以下对象加载：

app.controller("gameLoadCtrl",function($scope) {
    $scope.games = [{
        name: "Habbo Hotel"
        icon: "someimage.jpg"
    }];
});

但不会以我尝试设置游戏列表格式的方式加载，我肯定仍然是完全相同的格式

index.html 下面是带有ng repeat的html代码。 目前没有加载图像，因为我仍在尝试只加载名称

    <div class="main-container container" ng-app="myApp" ng-controller="gameLoadCtrl">
        <span class="game-card col-lg-2 col-sm-4 col-xs-6" ng-repeat="game in games">
        {{game.name}}</span>
    </div> 

{{game.name}

gameloader.js 以下是我认为造成问题的原因，从loadGames（）返回列表后，$scope.games将更新，但它将显示空白结果

var app = angular.module("myApp", []);

app.controller("gameLoadCtrl",function($scope) {
    $scope.games = [loadGames()];
});

// Load games and icon dir from txt file
function loadGames() {
    $.get("files/gameslist.txt", function (data, status) {
        // Split at unique seperator
        var gamesWithPicsList = data.split("<(O_O)>");
        var games = [];
        for (i=0; i < gamesWithPicsList.length-1; i++) {
            // Split game name and icon dir at seperator
            var gameAndPic = gamesWithPicsList[i].split(",");
            var game = "";
            var pic = "";
            // Slice off line break for all games listed apart from first
            if (i>0) {
                game = gameAndPic[0].slice(2);
            } else {
                game = gameAndPic[0];
            }
            pic = gameAndPic[1];
            // Add new game object to array
            games.push({
                name: game,
                icon: pic
            });
        }
        return games;
    }, "text");
};

var-app=angular.module（“myApp”，[]）；
app.controller（“gameLoadCtrl”，函数（$scope）{
$scope.games=[loadGames（）]；
});
//从txt文件加载游戏和图标目录
函数loadGames（）{
$.get（“files/gameslist.txt”，函数（数据、状态）{
//在唯一分隔符处拆分
var gamesWithPicsList=data.split（“”）；
var博弈=[]；
对于（i=0；i0）{
game=gameAndPic[0]。切片（2）；
}否则{
game=gameAndPic[0]；
}
pic=gameAndPic[1]；
//将新游戏对象添加到阵列中
推({
名称：游戏，
图标：pic
});
}
返回游戏；
}“文本”）；
};

---

问题肯定出在loadGames（）中，我似乎正在将它推入游戏数组中，但我不明白为什么$scope不接受它。

下面的语句导致创建嵌套数组。 $scope.games=[loadGames（）]； 请试着这样做 $scope.games=loadGames（）

---

或者尝试在loadGames函数本身中设置$scope.games值，而不是返回。这将使您的生活变得轻松：）

以下语句导致创建嵌套数组。 $scope.games=[loadGames（）]； 请试着这样做 $scope.games=loadGames（）

---

或者尝试在loadGames函数本身中设置$scope.games值，而不是返回。这将使您的生活变得轻松：）

您将永远无法按照您定义的方式加载游戏

loadGames（）

在您的例子中是一种异步方法

因此，您必须在$scope中定义

$。get

不要调用方法

loadGames

因此，不要这样做：

$scope.games = [loadGames()];

这样做：

var app = angular.module("myApp", []);

app.controller("gameLoadCtrl",function($scope) {
    $scope.games = generateGamesList();
});

function generateGamesList() {
    var games=[];
    var fileUrl = "files/gameslist.txt";
    $.ajax({
        url: fileUrl,
        type: "get",
        dataType: "text",
        async: false,
        success: function (data) {
            // Split at unique seperator
            var gamesWithPicsList = data.split("<(O_O)>");
            for (i=0; i < gamesWithPicsList.length-1; i++) {
                // Split game name and icon dir at seperator
                var gameAndPic = gamesWithPicsList[i].split(",");
                var game = "";
                var pic = "";
                // Slice off line break for all games listed apart from first
                if (i>0) {
                    game = gameAndPic[0].slice(2);
                } else {
                    game = gameAndPic[0];
                }
                pic = gameAndPic[1];
                // Add new game object to array
                games.push({
                    name: game,
                    icon: pic
                });
            }
            alert(games);
        }
    });
    return games;
};

var-app=angular.module（“myApp”，[]）；
app.controller（“gameLoadCtrl”，函数（$scope）{
$scope.games=generateGamesList（）；
});
函数generateGamesList（）{
var博弈=[]；
var fileUrl=“files/gameslist.txt”；
$.ajax({
url:fileUrl，
键入：“获取”，
数据类型：“文本”，
async:false，
成功：功能（数据）{
//在唯一分隔符处拆分
var gamesWithPicsList=data.split（“”）；
对于（i=0；i0）{
game=gameAndPic[0]。切片（2）；
}否则{
game=gameAndPic[0]；
}
pic=gameAndPic[1]；
//将新游戏对象添加到阵列中
推({
名称：游戏，
图标：pic
});
}
警觉（游戏）；
}
});
返回游戏；
};

您将永远无法按照您定义的方式加载游戏

loadGames（）

在您的例子中是一种异步方法

因此，您必须在$scope中定义

$。get

不要调用方法

loadGames

因此，不要这样做：

$scope.games = [loadGames()];

这样做：

var app = angular.module("myApp", []);

app.controller("gameLoadCtrl",function($scope) {
    $scope.games = generateGamesList();
});

function generateGamesList() {
    var games=[];
    var fileUrl = "files/gameslist.txt";
    $.ajax({
        url: fileUrl,
        type: "get",
        dataType: "text",
        async: false,
        success: function (data) {
            // Split at unique seperator
            var gamesWithPicsList = data.split("<(O_O)>");
            for (i=0; i < gamesWithPicsList.length-1; i++) {
                // Split game name and icon dir at seperator
                var gameAndPic = gamesWithPicsList[i].split(",");
                var game = "";
                var pic = "";
                // Slice off line break for all games listed apart from first
                if (i>0) {
                    game = gameAndPic[0].slice(2);
                } else {
                    game = gameAndPic[0];
                }
                pic = gameAndPic[1];
                // Add new game object to array
                games.push({
                    name: game,
                    icon: pic
                });
            }
            alert(games);
        }
    });
    return games;
};

var-app=angular.module（“myApp”，[]）；
app.controller（“gameLoadCtrl”，函数（$scope）{
$scope.games=generateGamesList（）；
});
函数generateGamesList（）{
var博弈=[]；
var fileUrl=“files/gameslist.txt”；
$.ajax({
url:fileUrl，
键入：“获取”，
数据类型：“文本”，
async:false，
成功：功能（数据）{
//在唯一分隔符处拆分
var gamesWithPicsList=data.split（“”）；
对于（i=0；i0）{
game=gameAndPic[0]。切片（2）；
}否则{
game=gameAndPic[0]；
}
pic=gameAndPic[1]；
//将新游戏对象添加到阵列中
推({
名称：游戏，
图标：pic
});
}
警觉（游戏）；
}
});
返回游戏；
};

您在理解它是如何工作的方面有点问题。您使用的函数就像是阻塞函数，但它是一个

您应该这样使用它：

app.controller("gameLoadCtrl",function($scope) {
    loadGames().then(function(games) {
        $scope.games = games;
    });
});

您还应该从loadGames函数返回值：

function loadGames() {
    // returns [$q promise][2]
    return $.get("files/gameslist.txt", function (data, status) {
        // Split at unique seperator
        var gamesWithPicsList = data.split("<(O_O)>");
        var games = [];
        for (i=0; i < gamesWithPicsList.length-1; i++) {
            // Split game name and icon dir at seperator
            var gameAndPic = gamesWithPicsList[i].split(",");
            var game = "";
            var pic = "";
            // Slice off line break for all games listed apart from first
            if (i>0) {
                game = gameAndPic[0].slice(2);
            } else {
                game = gameAndPic[0];
            }
            pic = gameAndPic[1];
            // Add new game object to array
            games.push({
                name: game,
                icon: pic
            });
        }
        return games;
    }, "text");
};

函数loadGames（）{
//