我有点困境。我正在使用Rails 4.2.3与AngularJS一起使用。我有一个表单需要上传关联数据模型的嵌套属性，并且还要上传图像。我已经发现，使用AJAX请求上传文件并不是一件容易的事，我正在使用ng-file-upload来解决这个问题，但是我遇到了一些基本的使用问题。
My Rails模型：
class Job < ActiveRecord::Base
has_many :references, dependent: :destroy
accepts_nested_attributes_for :references, limit: 5
end
class Reference < ActiveRecord::Base
belongs_to :job
end
Rails在提交表单时需要这种格式：
Parameters: {"job"=>{"title"=>"Example Title", "company"=>"Example Company", "description"=>"Example Description", "references_attributes"=>{"0"=>{"reference"=>"Example Reference", "id"=>"1"}}, "image"=> #plus the image data here}
使用ng-file-upload，似乎几乎不可能包含嵌套属性（或者我可能缺少某些东西，我已经多次阅读文档以试图在此处找到任何内容）。我已经采用了这种有点hacky的方式，以Rails可以理解的方式包含嵌套属性。表格如下：
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form ng-submit="save(job)" accept-charset="UTF-8" enctype="multipart/form-data">
<label for="job_title">Title</label>
<input ng-model="job.title"
class="form-control"
id="job_title"
name="job[title]"
type="text"
required />
<div ng-repeat="error in errors.title" class="alert alert-danger">Title {{error}}</div>
<label for="job_company">Company</label>
<input ng-model="job.company"
class="form-control"
id="job_company"
name="job[company]"
type="text"
required />
<div ng-repeat="error in errors.company" class="alert alert-danger">Company {{error}}</div>
<label for="job_years">Years</label>
<input ng-model="job.years"
class="form-control"
id="job_years"
name="job[years]"
type="text" />
<div ng-repeat="error in errors.years" class="alert alert-danger">Years {{error}}</div>
<label for="job_manager">Manager</label>
<input ng-model="job.manager"
class="form-control"
id="job_manager"
name="job[manager]"
type="text" />
<div ng-repeat="error in errors.manager" class="alert alert-danger">Manager {{error}}</div>
<label for="job_contact">Contact</label>
<input ng-model="job.contact"
class="form-control"
id="job_contact"
name="job[contact]"
type="text" />
<div ng-repeat="error in errors.contact" class="alert alert-danger">Contact {{error}}</div>
<label for="job_address">Address</label>
<input ng-model="job.address"
class="form-control"
id="job_address"
name="job[address]"
type="text" />
<div ng-repeat="error in errors.address" class="alert alert-danger">Address {{error}}</div>
<label for="job_description">Description</label>
<textarea ng-model="job.description"
class="form-control"
id="job_description"
name="job[description]"
required>
</textarea>
<div ng-repeat="error in errors.description" class="alert alert-danger">Description {{error}}</div>
<label for="job_skills">Skills</label>
<input ng-model="job.skills"
class="form-control"
id="job_skills"
name="job[skills]"
type="text" />
<div ng-repeat="error in errors.skills" class="alert alert-danger">Skills {{error}}</div>
<label for="job_references">References</label>
<input ng-model="job.references[0]"
class="form-control"
id="job_references_attributes_0_reference"
name="job[references_attributes][0][reference]"
type="text" />
<input ng-model="job.references[1]"
class="form-control"
id="job_references_attributes_1_reference"
name="job[references_attributes][1][reference]"
type="text" />
<input ng-model="job.references[2]"
class="form-control"
id="job_references_attributes_2_reference"
name="job[references_attributes][2][reference]"
type="text" />
<input ng-model="job.references[3]"
class="form-control"
id="job_references_attributes_3_reference"
name="job[references_attributes][3][reference]"
type="text" />
<input ng-model="job.references[4]"
class="form-control"
id="job_references_attributes_4_reference"
name="job[references_attributes][4][reference]"
type="text" />
<label for="job_image">Image</label>
<input ng-model="job.image"
class="width-100"
id="job_image"
name="job[image]"
type="file"
ngf-select
accept="image/*"
ngf-max-size="5MB" />
<div ng-repeat="error in errors.image" class="alert alert-danger">Image {{error}}</div>
<div class="center">
<div class="btn-group">
<input class="btn btn-large btn-primary"
name="commit"
type="submit"
value="Submit" />
</div>
<div class="btn-group">
<a ng-click="back()" href class="btn btn-large btn-default">← Cancel</a>
</div>
</div>
</form>
</div>
</div>
我所指的“hacky”位是我的“job.references [0]”正在进行的地方。以下是我使用ng-file-upload工作以包含嵌套属性的方法：
$scope.save = function(job) {
var file = job.image;
Upload.upload({
url: '/api/jobs/' + job.id,
method: 'PUT',
fields: {
'job[title]': job.title,
'job[company]': job.company,
'job[description]': job.description,
'job[years]': job.years,
'job[manager]': job.manager,
'job[contact]': job.contact,
'job[skills]': job.skills,
'job[address]': job.address,
'job[references_attributes][0][reference]': job.references[0],
'job[references_attributes][1][reference]': job.references[1],
'job[references_attributes][2][reference]': job.references[2],
'job[references_attributes][3][reference]': job.references[3],
'job[references_attributes][4][reference]': job.references[4] },
file: file,
fileFormDataName: 'job[image]'
}).progress(function (evt) {
$scope.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
console.log('Progress: ' + $scope.progress + '% ' + evt.config.file.name);
}).success(function (data, status, headers, config) {
console.log('File ' + config.file.name + 'uploaded. Response: ' + data);
$scope.jobs.push(data);
$state.go('jobs.show', {id: $stateParams.id})
}).error(function (data, status, headers, config) {
console.log('Error status: ' + status);
$scope.errors = data;
});
}
这适用于新模型条目，但是当我在这里编辑现有条目时它出错了...这是通过此设置发送到Rails的JSON数据：
Parameters: {"job"=>{"title"=>"Example Title", "company"=>"Example Company", "description"=>"Example Description", "references_attributes"=>{"0"=>{"reference"=>"Example Reference"}}, "image"=> #plus the image data here}
您可能已经注意到，“id”属性不再包含在嵌套属性中。这导致Rails在我提交任何编辑时复制现有的嵌套属性。有没有人更好地了解如何使用ng-file-upload包含嵌套属性？或者甚至是没有ng-file-upload的解决方案？
提前致谢！
答案 0 :(得分：4)
该工具最近有一个更新，它极大地帮助了嵌套属性。为此使用Rails，使用嵌套属性...在表单中，您可以使用以下格式：
<input ng-model="Object.nested_attributes[0]" />
然后在AngularJS控制器中：
Upload.upload({
url: 'RailsController#create or update path',
method: 'post or put',
data: {
YourDataModel: {
image: file,
nested_attributes: $scope.Object.nested_attributes
}
}
});