ng-model not binding to select options
Question
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 .
2 answers
solution1
1 2016-10-19 12:28:27
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.
- Add double quote to end the ng-controller atrribute.
<div ng-controller="UserRegistrationController as userReg> - Removed UserRegistrationService declaration from controller as its not defined or shared.
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>
solution2
0 2016-10-19 12:06:14
这是您的工作代码JS FIDDLE您错过了ng-controller中的“”
<div ng-controller="UserRegistrationController as userReg">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.