AngularJS不顯示ng-repeat，只是顯示一個空列表

Question

我試圖在AngularJS中顯示對象的集合時出現問題。

ng-repeat僅顯示控制檯中的項目，但數據爲空。我正確地獲取了JSON數據，並獲得了我的api成功的範圍項目。 在我看來，它只是在底部顯示一個灰色條，數據打印在底部，而不是在ng-repeat上。

<div ng-controller="userController"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h2>Users</h2> 
       </div> 
       <div class="panel-body"> 

         <div class="user"> 
          <div class="form-group"> 
          <input ng-model="user.name" type="text" placeholder="User Name" class="form-control"> 
         </div> 
         <div class="form-group"> 
          <input ng-model="user.email" type="email" placeholder="User Email " class="form-control"> 
         </div> 
         <div class="form-group"> 
          <input ng-model="user.password" type="password" placeholder="Set Your Password" class="form-control" > 

         </div> 
         <div class="form-group"> 
          <select ng-model="user.admin" name="" id="" class="form-control"> 
           <option value="">Admin</option> 
          </select> 
         </div> 
         <div class="form-group"> 
          <button ng-click="createUser(user)" class="btn btn-success">Create User</button> 
         </div> 
         </div> 

       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h3>All Users</h3> 
       </div> 
       <div class="panel-body"> 
        <table class="table"> 
         <thead> 
          <tr> 
           <th>id</th> 
           <th>Name</th> 
           <th>Email</th> 
           <th>Options</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr ng-repeat="user in users"> 
           <td>{{ user.id }}</td> 
           <td>{{ user.name }}</td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
{{users}} 

請參閱 this image和this one。

(function() { 
    'use strict'; 
angular 
    .module('anicasioApp') 
    .controller('userController', userController); 
    function userController($scope, $http){ 
     $scope.createUser = createUser; 
     $scope.users = []; 

    function init(){ 
     getAllUsers(); 
    } 
    init(); 

    function getAllUsers() { 

     $http.get('/api/userpost/') 
     .then(function(users) { 
      $scope.users = users; 
      console.log($scope.users); 
     }) 
     .catch(function(err) { 
      err.sendStatus(400); 
     }) 
    } 

    function createUser(users) { 
     console.log(users); 
     $http.post('/api/userpost/', users) 
      .then(getAllUsers); 
      console.log(users); 
    } 

    } 
})(); 

    // Users Model 
function getAllUsers(req, res) { 
    UserModel 
     .find() 
     .then(function(users) { 
      res.json(users); 
     }), 
     function(err){ 
      res.sendStatus(400); 
     } 
} 

Answer 1

初始化$ scope.users爲空數組[]，但在你$ HTTP答應你在響應分配，這是數據。因此，嘗試這種分配更改爲$scope.users = users.data;

$http.get('/api/userpost/').then(function(users) { 
    $scope.users = users.data; 
    console.log($scope.users); 
}).catch(function(err) { 
    console.log(error); 
    // sendStatus() function belongs to express on the serverside 
    // err.sendStatus(400); 
}) 

現在在你的HTML你應該能夠遍歷它：

<div ng-repeat="user in users track by user._id"> 
    ... 
</div> 

Answer 2

@Andriy是正確的...

在你的函數

function getAllUsers() { 

    $http.get('/api/userpost/') 
    .then(function(users) { // var 'users' is actually your server 'response' 
     $scope.users = users; 
     console.log($scope.users); 
    }) 
    .catch(function(err) { 
     err.sendStatus(400); 
    }) 
} 

你不應該這樣做$scope.users = users;，但是這個：$scope.users = users.data;因爲兩種不同方式之間的區別，我們可以處理的承諾：

當您使用

$http.get('/myserviceurl'). 
    success(data){//mycode} 

你得到response.data由服務器返回的STANDAR參數... 但如果你這樣做（這是你是怎麼做的吧！）

$http.get('/myserviceurl'). 
    then(response){//mycode} 

...你越來越是從服務器，它包含了data變量，攜帶數據response你要。