up vote 0 down vote favorite

I built a csv contact importer using Papaparse. The site runs on angular.

This is my form:

<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>

The HTML gives this result:

enter image description here

So far, this all functions and displays correctly. However, I have no idea how to capture the data in my processImport() function.

I thought of using binding, but since a user can add/remove attributes from the select box, I can't pre-build the select box. And since each csv can have a different number of columns, I need to repeat with each column there is.

Any suggestions on how I can capture the data submitted here? Please let me know if I should add anything else.

share|improve this question
    
have a look at this fiddle you need to change some code in html.. its always a nice idea to have an object associated with form to capture all the data.. and is the standard way of doing it in Angular – Minato Dec 4 '15 at 6:38
    
@Minato thanks for the fiddle, I've updated it to show my predicament. How would I get it to work if ng-model="myform.selectedPerson" was a dynamic value from the backend? So ng-model won't alwyas be myform.selectedPerson. In one case it will be myform.selectedPerson and in the next myform.theSupervisor. Remember, that this value is determined by a result from an API, so it could be anything, and I can't set/see it. – Albert Dec 4 '15 at 7:28
up vote 1 down vote accepted

So for those struggling with something like this, it's really not that complex. Yes, I know I'm saying that now, but when you see the solution, it's pretty simple.

So I have an object like this:

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"
}

Which, if you see the image above you'd recognise as what is displayed in the image in my question. To get those dropdowns working, this is what my HTML looks like:

<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>

Then, on my form submit, I just have a processImport() function. That function looks like this:

$scope.processImport = function() {
    console.log($scope.select);
}

And that catches all my data.

A cleaner example is available here. Thanks to the original author, as he definitively answered my question.

share|improve this answer
    
You should always use an object inside the form to capture the data... – Minato Dec 4 '15 at 9:58
    
I'm new to Angular, so this doesn't make sense. Am I doing it now, and if not, what would you suggest I change to do that? – Albert Dec 4 '15 at 10:11

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.