Reputation: 6481
I have googled this a lot, and can't figure out what is wrong in my code. My ng-model is not updating on selecting an option from the select box.
<div ng-controller="UserRegistrationController as userReg">
<select name="selectOrganisation" ng-required="true" ng-model="userReg.candidateData.BusinessUnit">
<option>Select Organisation</option>
<option>ABC</option>
<option>XYZ</option>
<option>KLM</option>
</select>
</div>
Controller:
(function (window) {
'use strict';
angular.module('myApp.userRegistration.controllers')
.controller('UserRegistrationController', ['UserRegistrationService', '$scope', function (UserRegistrationService, $scope) {
var vm = this;
vm.candidateData = {
FirstName: '',
LastName: '',
Email: '',
PhoneNumber: '',
JobId: '',
PrimarySkills: '',
SecondarySkills: '',
BusinessUnit: '',
CreatedBy: 'SPAN54',
CreatedOn: new Date(),
resume: '',
OfferStatus: 1,
Remarks: ''
};
}]);
})(window);
On console.log(vm.candidateData.BusinessUnit) inside my post function(not visible here), I see " ".
UPDATE 1: The " is there in my code. I just overlooked it while pasting it here. Have updated above code now. But my code is still not working.
UPDATE 2: Finally, I figured the issue. I am using Materialize.css in my app, and my select element is getting wrapped up in a div and ul-li. So when user selects a value, he is actually modifying the ul-li, not the select element. But I am not able to figure out how I can capture the selected value like this. Any ideas? Thanks.
UPDATE 3: Added a fiddle.
Upvotes: 0
Views: 771
Reputation: 36
Tried the code you posted. And its working for me. I added Working Code Snippet below.
Did these changes to make it work. If its still not working for you, could you share a working snippet.
<div ng-controller="UserRegistrationController as userReg>
var app = angular.module('sample', []);
app.controller('UserRegistrationController', ['$scope', function($scope) {
var vm = this;
vm.candidateData = {
FirstName: '',
LastName: '',
Email: '',
PhoneNumber: '',
JobId: '',
PrimarySkills: '',
SecondarySkills: '',
BusinessUnit: '',
CreatedBy: 'SPAN54',
CreatedOn: new Date(),
resume: '',
OfferStatus: 1,
Remarks: ''
};
$scope.change = function() {
console.log(vm.candidateData.BusinessUnit);
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="sample">
<div ng-controller="UserRegistrationController as userReg">
<select ng-change="change()" name="selectOrganisation" ng-required="true" ng-model="userReg.candidateData.BusinessUnit">
<option>Select Organisation</option>
<option>ABC</option>
<option>XYZ</option>
<option>KLM</option>
</select>
</div>
</body>
Upvotes: 1
Reputation: 171
Here is your Working code JS FIDDLE You missed out the ' " ' in ng-controller
<div ng-controller="UserRegistrationController as userReg">
Upvotes: 0