Having multiple dynamic select boxes angularjs

Question

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:

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.

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
– Minato, Commented Dec 4, 2015 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. — Bird87 ZA
– Bird87 ZA, Commented Dec 4, 2015 at 7:28

Community · Accepted Answer · 2017-05-23 11:59:14Z

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.

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?

Collectives™ on Stack Overflow

Having multiple dynamic select boxes angularjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related