在AngularJS中使用ng repeat调用和迭代函数返回值

calling and iterating over function return value using ng-repeat in AngularJS

本文关键字：调用 迭代 函数 返回值 repeat ng AngularJS      更新时间：2023-09-26

在阅读了JS和AngularJS应用程序中嘲笑服务器依赖性的文章后，我目前正在我的小型AngularJS程序中重构我的主控制器。

在我的标记中，我使用ng-repeat指令迭代"主要事件"：

这是我的AngularJS模块，重构了存储库和控制器。

但是，我无法以这种方式访问主事件数组——我缺少什么？

// Module
var app = angular.module('MainEventApp', ['cloudinary']);
// Repository
app.service('MainEventRepository', ['$http', function($http) {
    this.$http = $http;
    this.getMainEvents = function() {
        return [
        {
            id: 1,
            roman_numeral: 'I',
            name: 'Hulk Hogan & Mr T vs Rowdy Roddy Piper & Paul Orndorff',
            venue: 'Madison Square Garden',
            state: 'New York',
            attendance: 19121
        },
        {
            id: 2,
            roman_numeral: 'II',
            name: 'Hulk Hogan vs King Kong Bundy',
            venue: 'Split-Transmission',
            state: 'New York/Illinois/California',
            attendance: 40085
        }
        ];
  };
}]);
// Controller
app.controller("MainEventCtrl", ['$scope', 'MainEventRepository', function ($scope, MainEventRepository) {
    MainEventRepository.getMainEvents().then(function(main_events) {
        //$scope.main_events = main_events;
        return main_events;
    });    
}]);

我的实时应用程序可以在这里看到（尚未重构）。

首先，要在标记中使用main_events，您需要在控制器范围中具有此属性。

其次，您的服务返回简单数组，但在控制器中，您使用它就像它返回promise一样。

所以，你的控制器代码应该是这样链接的：

app.controller("MainEventCtrl", ['$scope', 'MainEventRepository', function ($scope, MainEventRepository) {
    $scope.main_events = MainEventRepository.getMainEvents();
}]);

以及您的标记：

<li ng-repeat="event in main_events"></li>

您必须将main_events添加到您的作用域中。

MainEventRepository.getMainEvents().then(function(main_events) {
    //$scope.main_events = main_events;
    return main_events;
});

为什么承诺中的第一行被注释掉了？

相关文章：