Angular passing dropdown value instead of actual string to Node

Question

I have a dropdown that is populated based off a jSON object I have created. I am trying to pass the text value "wineSupplier" to be the text selection in the dropdown, but instead it is passing the array value in the POST to Node.

Thus, if my dropdown has the following options:

A
B
C
D

and I choose "C" the value of 2 is being passed, I would like to be able to receive "C"

Code Snippet from wines.ejs:

            <form action="/createWine" method="POST">
                <p>Select the Wine Supplier:</p>
                <select name="wineSupplier" ng-model="supplierSelection" ng-options="supplier as supplier.supName for supplier in suppliers">
                </select>
                <label>Wine Name:</label>
                <input type="text" name="wineName" placeholder="Wine Name"/>
                <label>Wine Producer:</label>
                <input type="text" name="wineProducer" placeholder="Wine Producer"/>
                <label>Wine Colour:</label>
                <input type="text" name="wineColour" placeholder="Wine Colour"/>
                <label>Wine Type:</label>
                <input type="text" name="wineType" placeholder="Wine Type"/>
                <label>Wine Country:</label>
                <input type="text" name="wineCountry" placeholder="Wine Country"/>
                <p>
                    <button type="submit" class="btn">Submit</button>
                </p>
            </form>

Code Snipper from app.js

//Create a new wine objhect

app.post('/createWine', function(request, response) {
    //create and save a wine model
    var wine = new myWine({
        wineSupplier: request.body.wineSupplier,
        wineName: request.body.wineName,
        wineProducer: request.body.wineProducer,
        wineColour: request.body.wineColour,
        wineType: request.body.wineType,
        wineCountry: request.body.wineCountry
    });

    //save to model
    wine.save(function(err, model) {
        if (err) {
            response.send(504, 'There was an error');
        }
        else {
            response.redirect('/');
        }
    });
});

It looks ok at first glance. What does a supplier look like? — ryanyuyu
– ryanyuyu, Commented Apr 3, 2015 at 19:22
ng-options="supplier.supName as supplier.supName for supplier in suppliers — Alaksandar Jesus Gene
– Alaksandar Jesus Gene, Commented Apr 3, 2015 at 19:23
Its because your value is set to array supplier as per your code.So selecting C is the index 2 of that array.That's why. Change the as as mentioned above. — Alaksandar Jesus Gene
– Alaksandar Jesus Gene, Commented Apr 3, 2015 at 19:24
@AlaksandarJesusGene I think the current one is ok. That binds to the actual element there. Not the index. I think there problem is how the actual supplier is getting treated, or what it is. — ryanyuyu
– ryanyuyu, Commented Apr 3, 2015 at 19:25
Okay so changed to "ng-options="supplier.supName as supplier.supName for supplier in suppliers">" and still getting the array value. — Freekstile
– Freekstile, Commented Apr 3, 2015 at 19:33

JLRishe · Accepted Answer · 2015-04-03 19:57:10Z

2

When you want the actual value of the <option>s and the <select> itself to be a value from your model, you should use track by.

Without track by, AngularJS will give the <options> numerical values that it will use to keep track of which selections belong to which array items.

angular.module('app', [])
.controller('C', ['$scope', function ($scope) {
  $scope.suppliers = [{supName:'A'},{supName:'B'}, {supName:'C'}, {supName:'D'}];
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app="app" ng-controller="C">
  <select name="wineSupplier" ng-model="supplierSelection" 
          ng-options="supplier.supName for supplier in suppliers track by supplier.supName">
  </select>
</div>

On the other hand, it seems like you are somewhat misusing Angular by using it to just provide part of your form and using a plain submit to submit the values. Ideally, all of your controls should be bound to fields in the model, and you should use AngularJS to perform the submit to the server. If you do this, you won't need to use track by.

edited Apr 3, 2015 at 19:57

answered Apr 3, 2015 at 19:29

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Freekstile Over a year ago

That works! Thank you sooooo much, saved a newbie from hours upon hours of headaches.

Collectives™ on Stack Overflow

Angular passing dropdown value instead of actual string to Node

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related