CODEWITHSUNDEEP
angularjs
Dong Hoon Kim
Dong Hoon Kim

Reputation: 84

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

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!

Upvotes: 1

Views: 1448

Answers (2)

Navoneel Talukdar
Navoneel Talukdar

Reputation: 4598

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

Upvotes: 0

cnorthfield
cnorthfield

Reputation: 3501

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!

Upvotes: 5

Related Questions