0
Angular.js、Node.jsの、PostgresqlのAngular.js：NGリピートを使用してビュー内のユーザーのプロパティを表示し、することができませんハンドルバー
app.js：
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var pathfinderUI = require('pathfinder-ui');
var engines = require('consolidate');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('html', engines.mustache);
app.set('view engine', 'html');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
// pathfinder
app.use('/pathfinder', function(req, res, next){
pathfinderUI(app)
next()
}, pathfinderUI.router)
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
公開/ JavaScriptの/user.js：
var app = angular.module('sendgrid-webhook', [])
app.controller('mainController', ($scope, $http) => {
$scope.formData = {};
// Get all users
$http.get('api/v1/users')
.then(function(response) {
$scope.userData = response.data;
console.log(response.data);
});
// Create a new todo
$scope.createUser =() => {
$http.post('/api/v1/users', $scope.formData)
.success((data) => {
$scope.formData = {};
$scope.userData = data;
console.log(data);
})
.error((error) => {
console.log('Error: ' + error);
});
};
// Delete a todo
$scope.deleteUser = (userID) => {
$http.delete('/api/v1/users/' + todoID)
.success((data) => {
$scope.userData = data;
console.log(data);
})
.error((data) => {
console.log('Error: ' + data);
});
};
});
のindex.html：
<!DOCTYPE html>
<html ng-app="sendgrid-webhook">
<head>
<title>SendGrid JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="//code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="javascripts/app.js"></script>
</head>
<body ng-controller="mainController">
<div class="container">
<form>
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Username" ng-model="formData.username">
<input type="text" class="form-control input-lg" placeholder="Email Address" ng-model="formData.email">
<input type="text" class="form-control input-lg" placeholder="Password" ng-model="formData.password">
</div>
<button type="submit" class="btn btn-primary btn-lg" ng-click="createUser()">Create User</button>
</form>
<div class="user-list">
<ul>
<li ng-repeat="user in userData"><input type="checkbox" ng-click="deleteUser(user.id)">
{{ user.username }}
</li>
</ul>
</div>
</div>
</body>
</html>
JSON応答：
[{"id":1,"username":"test","email":"[email protected]","password":"newpass"},{"id":4,"username":"First","email":"[email protected]","password":"test"},{"id":5,"username":"Tesing a third user","email":"[email protected]","password":"testing"}]
コンソールログオブジェクト：app.jsで6行目の
、私は、ユーザーオブジェクトの適切な配列を返すユーザーのエンドポイントへのAPI呼び出しを作っています。これは '$ scope.userData'として保存されます。私が戻り値をチェックするデバッガだったとき、私は3人のユーザの配列を取得します。 index.htmlを見ると、それぞれに作成されているチェックボックスが表示されます。
私はindex.htmlの24行目で、userDataの 'ng-repeat = "userで' li '要素を設定しています。これらの 'li'要素のそれぞれの中に、{{user.username}}でユーザーのプロパティを表示したいと考えています。
私の見解では、ユーザーオブジェクトの配列を繰り返して、それぞれに「li」を作成していますが、ハンドルバーには私が要求しているuser.usernameプロパティが表示されません。
EDIT：
It works in Plunker when I replace the AJAX call with the response data from the console
しかし、ディレクトリ構造が違いすぎると、ノードが関与していません。
コードを投稿に埋め込み、コードの画像を投稿しないでください。 –
userDataを 'log'してjsonの構造をチェックしてください（質問に貼り付けるほうがはるかに良い） –
最初の配列には何がありますか？ –