CODEWITHSUNDEEP
javascriptangularjs
NVO
NVO

Reputation: 2713

ng-model from select is undefined

I have an select box in html with some options generated from an ng-repeat.

<select ng-model="pageId" ng-change="setFacebookPage()">
    <option ng-repeat="page in pages" ng-value="page.id"> {{page.name}}</option>
</select>

That works. The value and the options are shown correct. But I want to get the value of pageId in my function setFacebookPage() and that's where it goes wrong, because pageId is undefined in the controller!

$scope.setFacebookPage = function(){
    console.log("setFacebookPage", $scope.pageId);
}

But when I change the value of pageId I can see it's value with {{pageId}}.

I have tried to give it's value as an parameter in the function like setFacebookPage(pageId), but that gives me also an undefined.

What the reason for this and how can I solve this?

Upvotes: 2

Views: 1311

Answers (2)

Sajeetharan
Sajeetharan

Reputation: 222712

I think you need

 <select ng-model="pageId" ng-change="setFacebookPage()">
      <option ng-repeat="page in pages" ng-value="page.id"> {{page.name}}</option>
 </select>

instead of 

<input type="select" ng-model="pageId", ng-change="setFacebookPage()">
    <option ng-repeat="page in pages" ng-value="page.id"> {{page.name}}</option>

DEMO

var app = angular.module('demo', []);

app.controller('myCtrl', function($scope) {
    $scope.pages = [{"id" : 1, "name" : "sachin"}, {"id" : 2, "name" : "sourav"}];
  $scope.setFacebookPage = function(){
    console.log( $scope.pageId);
}


});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <body ng-app="demo" ng-controller="myCtrl">
    <select ng-model="pageId" ng-change="setFacebookPage()">
      <option ng-repeat="page in pages" ng-value="page.id"> {{page.name}}</option>
    </select>
  </body>

Upvotes: 0

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28475

There are small errors in your code.

  • Use select element
  • Comma between attributes are not allowed

Hence, update your code to following

 <select ng-model="pageId" ng-change="setFacebookPage()">
     <option ng-repeat="page in pages" ng-value="page.id"> {{page.name}}</option>
 </select>

You can tweak here

Upvotes: 2

Related Questions