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} 

... то, что вы получаете, response от сервера, который содержит data переменную, которая несет в себе данные вы хотите.