Angular没有显示ng-repeat只显示空的列表

你好家伙我有问题试图显示angular度的对象集合

ng-repeat只显示控制台上的项目，但显示的数据是空的获取数据json正确地捕捉范围项目与我的视图的成功我的api只是在底部显示一个灰色条，数据打印在底部，而不是在ng-重复。

<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}} 

请看， 这个图像和这一个

 (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

 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服务器返回的标准参数…但如果你这样做（这是你怎么做的！）

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

…你得到的是服务器的response ，其中包含datavariables，它携带你想要的数据。