我是MEAN Stack的新手,在完成本教程之后:http://www.bradoncode.com/tutorials/mean-stack-tutorial-part-4-angularjs/,我试图创建自己的Web应用程序来发送和接收发票。我有一个localhost:3000 /发票页面设置,当前为空([])。我正在尝试填写表单并发布到localhost:3000 /发票,以便填充MongoDB数据库。我的MongoDB进程一直在运行。这是模型,概述了我在记录中需要的所有字段:
'use strict';
/**
* Module dependencies.
*/
var mongoose = require('mongoose'),
Schema = mongoose.Schema,
validation = require('./validation.server.model');
/**
* Invoices Schema
*/
var InvoiceSchema = new Schema({
invoice_date: {
type: Date,
default: Date.now
},
from_entity: {
type: String,
default: '',
trim: true,
required: 'legal entity cannot be blank'
},
from_service: {
type: String,
default: '',
trim: true,
required: 'service line cannot be blank'
},
country: {
type: String,
default: '',
trim: true,
required: 'country cannot be blank'
},
to_entity: {
type: String,
default: '',
trim: true,
required: 'legal entity cannot be blank'
},
to_service: {
type: String,
default: '',
trim: true,
required: 'service line cannot be blank'
},
partner: {
type: String,
default: '',
trim: true,
required: 'partner cannot be blank'
},
invoice_number: {
type: String,
default: '',
trim: true,
unique: true,
required: 'invoice number cannot be blank'
},
currency: {
type: String,
default: '',
trim: true,
required: 'currency cannot be blank'
},
amount: {
type: Number,
default: '',
trim: true,
required: 'amount cannot be blank'
}
});
mongoose.model('Invoice', InvoiceSchema);
这是我的发票客户端控制器:
'use strict';
// Invoices controller
angular.module('invoices').controller('InvoicesController', ['$scope', '$stateParams', '$location', 'Authentication', 'Invoices', '$filter',
function($scope, $stateParams, $location, Authentication, Invoices, $filter) {
$scope.authentication = Authentication;
$scope.currentPage = 1;
$scope.pageSize = 10;
$scope.offset = 0;
// Page changed handler
$scope.pageChanged = function() {
$scope.offset = ($scope.currentPage - 1) * $scope.pageSize;
};
// Create new Invoice
$scope.create = function() {
var invoice = new Invoices ({
amount: this.amount,
invoice_number: this.invoice_number,
partner: this.partner,
to_service: this.to_service,
to_entity: this.to_entity,
country: this.country,
from_service: this.from_service,
from_entity: this.from_entity
});
// Redirect after save
invoice.$save(function(response) {
$location.path('invoices/' + response._id);
// Clear form fields
$scope.name = '';
}, function(errorResponse) {
$scope.error = errorResponse.data.message;
});
};
// Remove existing Invoice
$scope.remove = function(invoice) {
if (invoice) {
invoice.$remove();
for (var i in $scope.invoices) {
if ($scope.invoices [i] === invoice) {
$scope.invoices.splice(i, 1);
}
}
} else {
$scope.invoice.$remove(function() {
$location.path('invoices');
});
}
};
// Update existing Invoice
$scope.update = function() {
var invoice = $scope.invoice;
invoice.$update(function() {
$location.path('invoices/' + invoice._id);
}, function(errorResponse) {
$scope.error = errorResponse.data.message;
});
};
// Find a list of Invoices
$scope.find = function() {
$scope.invoices = Invoices.query();
};
// Find existing Invoice
$scope.findOne = function() {
$scope.invoice = Invoices.get({
invoiceId: $stateParams.invoiceId
});
};
// Search for a Invoice
$scope.invoiceSearch = function(invoice) {
$location.path('invoices/' + invoice._id);
};
}
]);
这是前端AngularJS中的一个简单形式:
<section data-ng-controller="InvoicesController">
<div class="page-header">
<h1>New Invoice</h1>
</div>
<div class="col-md-12">
<form class="form-horizontal" data-ng-submit="create()" novalidate>
<fieldset>
<div class="form-group">
<label class="control-label" for="invoice_number">Invoice Number</label>
<div class="controls">
<input type="text" data-ng-model="invoice.invoice_number" id="invoice_number" class="form-control" placeholder="Invoice Number" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="amount">Amount</label>
<div class="controls">
<input type="text" data-ng-model="invoice.amount" id="amount" class="form-control" placeholder="Amount" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="currency">Currency</label>
<div class="controls">
<input type="text" data-ng-model="invoice.currency" id="currency" class="form-control" placeholder="Currency" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="partner">Partner</label>
<div class="controls">
<input type="text" data-ng-model="invoice.partner" id="partner" class="form-control" placeholder="Partner" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="country">Country</label>
<div class="controls">
<input type="text" data-ng-model="invoice.country" id="name" class="form-control" placeholder="Country" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="to_service">Service Line (To:)</label>
<div class="controls">
<input type="text" data-ng-model="invoice.to_service" id="to_service" class="form-control" placeholder="Service Line (To:)" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="from_service">Service Line (From:)</label>
<div class="controls">
<input type="text" data-ng-model="invoice.from_service" id="from_service" class="form-control" placeholder="Service Line (From:)" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="to_entity">Entity(To:)</label>
<div class="controls">
<input type="text" data-ng-model="invoice.to_entity" id="to_entity" class="form-control" placeholder=" Entity (To:)" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="from_entity">Entity(From:)</label>
<div class="controls">
<input type="text" data-ng-model="invoice.from_entity" id="from_entity" class="form-control" placeholder=" Entity (From:)" required>
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-default">
</div>
<div data-ng-show="error" class="text-danger">
<strong data-ng-bind="error"></strong>
</div>
</fieldset>
</form>
</div>
</section>
当我继续并提交表格时,我得到以下内容:
金额是模型中显而易见的必填字段,我始终肯定会填写该值。我总是输入数字和小数,但是表示该字段是必需的并显示错误请求。每当我做npm启动时,我的应用程序加载没有任何错误。我试过看几个youtube教程,但没有一个澄清这个不起作用的原因。 Swift Help将不胜感激:)
编辑:当我从模型中删除所需内容时,交易将完成,但不会记录输入到表单中的任何值,只会记录发票日期。
答案 0 :(得分:1)
你得到一个日期,因为有一个默认设置。在控制器中定义$scope.invoice = {}
,以便它绑定到您的视图(双向)。然后,更改$ scope.invoice中的所有提取。例如:
$scope.invoice = {};
$scope.create = function() {
var invoice = new Invoices ({
amount: $scope.invoice.amount,
invoice_number: $scope.invoice.invoice_number,
partner: $scope.invoice.partner,
...
});
...
};