The selected value in the ng-model is not defined

Question

The selected value in the ng-model is not defined

In my HTML, I have a select box with 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>

Everything seems to be working correctly as the values and options are displayed properly. However, when trying to access the value of pageId in the function setFacebookPage(), it turns out to be undefined within the controller.

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

Interestingly, if I change the value of pageId, I can see its new value using {{pageId}}.

I attempted passing it as a parameter in the function like setFacebookPage(pageId), but that also resulted in an undefined value.

What could be causing this issue and how can I go about solving it?

javascript angularjs

Answer 1

Answer №1

Your code contains some minor errors that need to be addressed.

Ensure you are using the select element correctly
Avoid using commas between attributes

To correct these issues, consider updating your code as shown below:

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

You can test the revised code here

Answer 2

Your code contains some minor errors that need to be addressed.

Ensure you are using the select element correctly
Avoid using commas between attributes

To correct these issues, consider updating your code as shown below:

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

You can test the revised code here

Answer 3

Answer №2

It is recommended to use

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

Answer 4

It is recommended to use

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

The selected value in the ng-model is not defined

Answer №1

Answer №2

Similar questions

Aligning container divs at the center in various screen resolutions

Consistently encountering incorrect values during onClick events

The output in Javascript featured the term undefined

Developing a jQuery Plugin to Generate an Interactive Dropdown Menu

Dealing with local JSON data asynchronously using ReactJS

What method can be used to verify if Handlebar.js is integrated into the application?

How can I create a menu of buttons in Vue that open individual windows with unique URLs when clicked?

An issue has occurred: Unable to access information of unknown origin (reading 'admin')

Navigating a JSON object using jQuery

Capture all URLs containing [...slug] and generate static props only for valid addresses in Next.js

The Angular application sent an OPTIONS request instead of a POST request via HTTP

Canvas cannot be duplicated due to tainting, html2canvas

Enhancing Image Upload with Ajax/JavaScript: Generating Multiple Previews

Disable onclick action for programmatically created buttons

Error: The property 'open' is not defined in the mdMenu object

Can you explain the meaning behind this specific AngularJS declaration?

What is the best way to determine the node version for executing the ng build command?

What is the best way to incorporate a rectangle or arrow into my canvas design?

Tips for returning JSON data using AJAX

A guide on understanding tab-formatted text in a textarea using JavaScript (Vuejs)