我在尝试显示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}}
(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);
}
}
您将$ 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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句