AngularJS 与 MongoDB，从数据库中提取数据，但无法使用 ng-repeat 显示

Posted 2023-03-11

【中文标题】AngularJS 与 MongoDB，从数据库中提取数据，但无法使用 ng-repeat 显示

【英文标题】：AngularJS with MongoDB, data is pulled from database, but cannot display with ng-repeat

【发布时间】：2015-03-04 16:02:43

【问题描述】：

我正在尝试从数据库中获取数据并使用ng-repeat 显示它。工厂的getAll 函数可以正常工作，我得到一个包含所有数据的对象，但它没有正确显示。在表中，我只得到第一个索引，后面什么都没有。

如果我尝试使用for(i = 0 ; i < DataService.persons.length ; i++)，它可以正常工作，但我不能将它与 ng-repeat 一起使用。

var testReactie = angular.module('testReactie', ['ngRoute']);

testReactie.config(function($routeProvider) 
   $routeProvider

       .when('/', 
        templateUrl : 'instructiuni.ejs'

       )
       .when('/form', 
        templateUrl : 'form.ejs',
        controller : 'formContr'
       )
       .when('/test', 
        templateUrl : 'joc.ejs',
        controller : 'gameContr'
       )
       .when('/stat', 
        templateUrl : 'scoruri.ejs',
        controller : 'statContr',
        resolve: 
            postPromise:['DataService', function(DataService)
                return DataService.getAll();
            ]
        
       );
    
);


testReactie.factory('DataService', ['$http', function($http) 
    var o = 
        persons:[],
        person:
    ;
    
    o.getAll = function()
        
      return $http.get('/db').success(function(data)
        o.persons = data;
        
      );  
    ;

    o.create = function() 
      return $http.post('/db', o.person).success(function(data)
        o.persons.push(data);
      );
    ;
    
    return o;
]);

testReactie.controller('mainContr',function($scope) 
    
);

testReactie.controller('statContr',function($scope, DataService) 

);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <h2>Scoruri</h2>

    <table class="table">
        <thead>
            <tr>
                <th>Nr.</th>
                <th>Sex</th>
                <th>Varsta</th>
                <th>Timp Mediu</th>
            </tr>
        </thead>
        <tbody>
            
            <div ng-repeat = "pers in DataService.persons">
                <tr>
                    <td>$index + 1</td>
                    <td>pers.sex</td>
                    <td>pers.varsta</td>
                    <td>pers.timp</td>
                </tr>
            </div>
            
        </tbody>
    </table>
    
</div>

【参考方案1】：

您不能将工厂作为控制器运行

在您的控制器中执行类似的操作

testReactie.controller('mainContr', ['DataService', '$scope', function(DataService, $scope) 
    DataService.getAll().then(function(successData) // a promise helps you do something when it's resolved
        $scope.awesomeData = successData;
    
);

改变你的工厂的一切，就像

o.getAll = function()
    var promise = $q.defer(); // the $q helps create a promise

      return $http.get('/db').success(function(data)
            promise.resolve(data); // promise returns data when resolved
      );  
return promise; // returns a promise
;

你的模板应该是

<div ng-repeat = "pers in awesomeData">

这是因为当你在你的模板中有它时，它会自动调用 $scope.awesomeData。因此，当您拥有 DataService 时，它​​正在调用未定义的 $scope.DataService。

我希望这会有所帮助。

【参考方案2】：

我解决了这个问题。它来自 html。我在 div 中添加了 ng-repeat 指令，它打破了表格。删除 div 并在标签中添加指令后，它工作正常。