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!
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!
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments