CODEWITHSUNDEEP
javascriptangularjs
darKnight
darKnight

Reputation: 6481

ng-model not binding to select options

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

Answers (2)

Rishabh
Rishabh

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.

  • 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>

Upvotes: 1

Gowrishankar RJ
Gowrishankar RJ

Reputation: 171

Here is your Working code JS FIDDLE You missed out the ' " ' in ng-controller

<div ng-controller="UserRegistrationController as userReg">

Upvotes: 0

Related Questions