Angular JS: Pass a forms select option value to database not working

Question

I currently have a form with a <select> and options as below. I am trying to pass the values into my db, but when running the app category is coming out as undefined. The form is using ng-controller="eventCtrl"

Form Select Code Below.

<div class="input-field col s5">
 <select class="browser-default">
  <option value="" disabled selected>Choose your category</option>
  <option value="Mountain" ng-model="category">Mountain</option>
  <option value="Forest" ng-model="category">Forest</option>
  <option value="Beach & Sea" ng-model="category">Beach & Sea</option>
  <option value="Fresh Water" ng-model="category">Fresh Water</option>
  <option value="Aero" ng-model="category">Aero</option>
  <option value="Desert" ng-model="category">Desert</option>
 </select>
</div>

eventCtrl Code Below.

angular.module('socialApp')
 .controller('eventCtrl', function($scope, $http) {
  $scope.createEvent = function() {
   $http.post('/events/createEvent', {
    title: $scope.title,
    category: $scope.category,
    city: $scope.city,
    state: $scope.state,
    date: $scope.date,
    time: $scope.time,
    description: $scope.description
  })
  .then(function(result) {
    console.log(result.data.status);
    console.log(result);
  })
 };
});

I am so lost with this please help!

cnorthfield · Accepted Answer · 2016-04-23 17:20:40Z

5

The ng-model attribute should be on the select element instead of each option element as so:

<div class="input-field col s5">
 <select class="browser-default" ng-model="category">
  <option value="" disabled selected>Choose your category</option>
  <option value="Mountain">Mountain</option>
  <option value="Forest">Forest</option>
  <option value="Beach & Sea">Beach & Sea</option>
  <option value="Fresh Water">Fresh Water</option>
  <option value="Aero">Aero</option>
  <option value="Desert">Desert</option>
 </select>
</div>

I'd definitely look up the documentation on this as it's very detailed!

edited Apr 23, 2016 at 17:20

answered Apr 23, 2016 at 17:17

cnorthfield

3,51119 silver badges25 bronze badges

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

4 Comments

hakazvaka Over a year ago

Also, consider using the ngOptions directive docs.angularjs.org/api/ng/directive/ngOptions

cnorthfield Over a year ago

Yes the ngOptions directive is very good to consider. Personally I use static HTML lists with angular if it is a) a long list and b) is not going to change. This is because ng-options and ng-repeat can have performance issues with very long lists!

cnorthfield Over a year ago

@donghoonkim, if this or any other future answer solves your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this.

Dong Hoon Kim Over a year ago

@papakia - as you can tell, I am still a noob when it comes to stack. Thanks for helping out with this issue, I really appreciate it!

Navoneel Talukdar · Accepted Answer · 2016-04-24 08:55:37Z

0

Consider using ngOptions like this:

<select ng-model="category" 
        ng-options="obj as obj.name for obj in arrayOfObject" />

The a as b syntax lets you bind a to the model, while showing b for your dropdown label.

If in case you need to get the value on change use ng-change="getSelectedValue(category)"

answered Apr 24, 2016 at 8:55

Navoneel Talukdar

4,6365 gold badges24 silver badges43 bronze badges

Collectives™ on Stack Overflow

Angular JS: Pass a forms select option value to database not working

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related