Я создаю очень основное угловое приложение, чтобы учиться. Мое приложение в основном загружает список пользователей и распечатывает их на домашней странице с флажком рядом с каждым именем, а также отображает количество существующих пользователей.
Список пользователей, похоже, работает - у меня появилось 11 пользователей и 11 флажков. ОДНАКО, фактический текст не отображается. Переменная users.length
также отображается как пустая.
Вот мой файл core.js
:
var userApp = angular.module('userApp', []);
userApp.controller("mainController", mainController);
function mainController($scope, $http) {
$scope.formData = [];
// when landing on the page, get all users and show them
$http.get('/api/users')
.success(function(data) {
$scope.users = data;
console.log(data);
console.log(data.length);
})
.error(function(data) {
console.log('Error: ' + data);
});
// when submitting the add form, send the text to the node API
$scope.createUser = function() {
$http.post('/api/users', $scope.formData)
.success(function(data) {
$scope.formData = {} //clear the form so our user is ready to enter another user
$scope.users = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
};
}
И вот мой файл index.html
:
<html ng-app="userApp">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
<title>Node/Angular Todo App</title>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
<style>
html { overflow-y:scroll; }
body { padding-top:50px; }
</style>
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
<script src="core.js"></script>
</head>
<body ng-controller="mainController">
<div class="container">
<div class="jumbotron text-center">
<h1>Users Count: <span class="label label-info"> {{ users.length }}</span></h1>
</div>
<div id="user-list" class="row">
<div class="col-sm-4 col-sm-offset-4">
<!-- loop over users -->
<div class="checkbox" ng-repeat="user in users">
<label>
<input type="checkbox">{{ user.first_name }}
</label>
</div>
</div>
</div>
<!-- create users -->
<div id="user-form" class="row">
<div class="col-sm-8 col-sm-offset-2 text-center">
<form>
<div class="form-group">
<!-- BIND THIS VALUE TO formData.text IN ANGULAR -->
<input type="text" class="form-control input-lg text-center" placeholder="I want to buy a puppy that will love me forever" ng-model="formData.text">
</div>
<!-- createUser() WILL CREATE NEW USERS -->
<button type="submit" class="btn btn-primary btn-lg" ng-click="createUser()">Add</button>
</form>
</div>
</div>
</div>
</body>
</html>
Пример записи пользователя:
{
"id": 1,
"first_name": "Bruce",
"last_name": "Lee",
"email": "[email protected]",
"password": "blee",
"created_at": "2016-01-08T21:49:18.337Z",
"updated_at": "2016-01-08T21:49:18.337Z"
},
Данные также корректно отображаются в файле console.log().
Может кто-нибудь помочь?
Заранее спасибо!
Если вы хотите перенести данные пользователя на Angular, вы должны исправить {{ first_name }}
{{ user.first_name }}
в своем html.
Это означает, что каждая метка получает имя от не объявленного глобально, а для пользователя.
Кроме того, вам лучше зарегистрировать контроллер в вашем js-коде.
в core.js
userApp.controller("mainController", mainController);
Служба $ http для углового должна возвращать объект ответа, а не необработанные данные. Согласно документам, это то, что находится в этом объекте:
Объект ответа имеет следующие свойства:
data - {string | Object} - тело ответа, преобразованное функциями преобразования.
status - {number} - код статуса HTTP ответа.
headers - {function ([headerName])} - Функция получения заголовка.
config - {Object} - объект конфигурации, который использовался для генерации запроса.
statusText - {string} - текст ответа HTTP-ответа. """
Попробуйте присвоить data.data
переменной $scope.users
так:
$http.get('/api/users')
.success(function(data) {
$scope.users = data.data; // <-------- here!!! (consider calling it response so you can use 'response.data'
console.log(data);
console.log(data.length);
})
.error(function(data) {
console.log('Error: ' + data);
});
Быстрое редактирование: похоже, вы используете старый способ делать вещи (.success
и .error
). Служба возвращает обещание, и вы должны потреблять его с помощью. .then
.
$http
.get('/api/users')
.then(function(response) {
$scope.users = response.data;
}, function(error) {
console.log('Error: ' + error);
});
{{first_name}}
выполните{{user.first_name}}
,{{user.property}}
и т. Д.