javascript - 具有多个动态选择框angularjs

Question

我使用 Papaparse 构建了一个 csv 联系人导入程序.该网站在 Angular 上运行。

这是我的表格:

<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() 函数中捕获数据。

我想过使用绑定(bind)，但由于用户可以从选择框添加/删除属性，我无法预先构建选择框。由于每个 csv 可以有不同数量的列，我需要对每一列重复。

关于如何捕获此处提交的数据有什么建议吗？如果我需要添加任何其他内容，请告诉我。

Answer 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 ，因为他明确地回答了我的问题。