我使用Papaparse构建了一个csv联系人导入程序。该网站以角度运行。
这是我的表格:
<div ng-show="import_file_selected">
<form ng-submit="processImport()" name="importForm">
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<tr>
<th ng-show="has_header" class="col-md-4">Header</th>
<th class="col-md-4">Attribute</th>
<th class="col-md-4">Value Sample</th>
</tr>
<tr ng-repeat="row in rows">
<td ng-show="has_header">{{row.header}}</td>
<td>
<select class="form-control" name="{{row.header}}">
<option value="">Ignore</option>
<option ng-repeat="attribute in attributes" value="{{attribute.key}}">{{attribute.val}}</option>
<option value="add">Add Attribute</option>
</select>
</td>
<td>{{row.values}}</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group col-md-offset-3">
<button class="btn btn-primary btn-block" type="submit">Save Import</button>
</div>
</div>
</form>
</div>
HTML给出了这个结果:
到目前为止,所有功能和显示都正确。但是,我不知道如何在我的processImport()
函数中捕获数据。
我想过使用绑定,但由于用户可以在选择框中添加/删除属性,因此我无法预先构建选择框。由于每个csv可以有不同数量的列,我需要重复每列。
有关如何捕获此处提交的数据的任何建议?如果我还要添加其他内容,请告诉我。
答案 0 :(得分:1)
因此,对于那些在这样的事情上苦苦挣扎的人来说,它并不那么复杂。是的,我知道我现在这么说,但是当你看到解决方案时,它非常简单。
所以我有一个像这样的对象:
var $scope.rows = {
'header': "Account Code",
'header_safe': "Account Code",
'options': ["Ignore", "Cellphone Number", "First Name", "Full Name", "Last Name", "Title","Add Attribute"],
'values: "WELG01, ABDO01, ABOO01, ABOO2, ABOO02, ABOU01, ABRA03, ABRA01, ABRA02, ACKE04"
},{
'header': "Customer Name"
'header_safe': "Customer Name"
'options': ["Ignore", "Cellphone Number", "First Name", "Full Name", "Last Name", "Title","Add Attribute"],
'values': ", Abdool, Aboo, Aboobaker, Aboobaker, Abouchabki, Abraham Thato, Abrahams, Abrams, Ackerman Rulaine"
}
如果您看到上面的图像,那么您就会认出我的问题中图像中显示的内容。要使这些下拉列表正常工作,这就是我的HTML的样子:
<table class="table table-hover">
<tr>
<th ng-show="has_header" class="col-md-4">Header</th>
<th class="col-md-4">Attribute</th>
<th class="col-md-4">Value Sample</th>
</tr>
<tr ng-repeat="row in rows">
<td ng-show="has_header">{{row.header}}</td>
<td>
<select class="form-control" ng-model="select[row.header_safe]" ng-options="option for option in row.options"></select>
</td>
<td>{{row.values}}</td>
</tr>
</table>
然后,在我的表单提交上,我只有一个processImport()
函数。该功能如下所示:
$scope.processImport = function() {
console.log($scope.select);
}
这会抓住我的所有数据。
可以使用更清晰的示例here。感谢original author,他明确地回答了我的问题。