ng-model in select not working with ng-submit

Question

Below is the code:

HTML

<form ng-submit="fun()">
  <select ng-model="a" ng-options="table.id as table.name for table in tables></select>
  <input type="text" ng-model="b">hello</input>
  <input type="submit">Ok</input>
</form>

JS

$scope.tables = [{"id":1, "name":"x"},{"id":2, "name":"y"},{"id":3, "name":"z"}]; 
//This is dummy data, tables is actually coming from another custom API
$scope.fun = function(){
  console.log($scope.a);
  console.log($scope.b);
}

This is the output:

undefined
hello

When I checked the source code, the options getting appended to my select look like this:

<option label="x" value="undefined:undefined"></option>

How can I get the selected option in the controller on ng-submit?

When you render the HTML, which options can you see in dropdown list? — cezar, Apr 05 '17 at 09:12
I have added tables array. The options are correctly displayed in the select box. — Piyush Shrivastava, Apr 05 '17 at 09:14
you must set the default value for selec in your model .This might help : http://stackoverflow.com/a/20790515/5532806 — Anurag, Apr 05 '17 at 09:14
Can't reproduce problem. Works fine in this [DEMO on PLNKR](https://plnkr.co/edit/eFjZlifoVT3FpXHWdXoK?p=preview). — georgeawg, Apr 05 '17 at 13:36

score 1 · Accepted Answer · 2017-04-05T09:23:23.407

1

check this....as you changed your data i updated with that

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

app.controller('MainCtrl', function($scope) {
 $scope.tables = [{"id":1, "name":"x"},{"id":2, "name":"y"},{"id":3, "name":"z"}];
 $scope.fun = function(){
  console.log($scope.a);
  console.log($scope.b);
}
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <form ng-submit="fun()">
  <select ng-model="a" ng-options="table.id as table.name for table in tables"></select>
  <input type="text" ng-model="b">
  <input type="submit">
</form>
  </body>

</html>

edited Apr 05 '17 at 09:23

answered Apr 05 '17 at 09:15

In the value field of your output options, it is showing: But my options look like this: – Piyush Shrivastava Apr 05 '17 at 09:37
http://plnkr.co/edit/GCn12F4FC5IF3jI3WDm6?p=preview check this plunker and compare with yours – Apr 05 '17 at 09:41
Thanks, found the bug – Piyush Shrivastava Apr 05 '17 at 09:50
It was in my object array format. It was something like `{"values":{"id":1.....` I was missing the `values` key. – Piyush Shrivastava Apr 05 '17 at 10:18

score 0 · Answer 2 · answered Apr 05 '17 at 09:19

since you are accessing table.id and table.name in the ng-options you need to change your array to object array like this

$scope.tables = [{"id":"1","name":"1"},{"id":"2","name":"2"},{"id":"3","name":"3"}];

angular.module("app",[])
.controller("ctrl",function($scope){

$scope.tables = [{"id":"1","name":"1"},{"id":"2","name":"2"},{"id":"3","name":"3"}];
$scope.fun = function(){
  console.log($scope.a);
  console.log($scope.b);
}
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <form ng-submit="fun()">
  <select ng-model="a" ng-options="table.id as table.name for table in tables"></select>
  <input type="text" ng-model="b" />
  <input type="submit"/>Ok
</form>
</div>

If you don't want to change the array then simply change the ng-options to this

ng-options="table as table for table in tables"

Demo

angular.module("app",[])
.controller("ctrl",function($scope){

$scope.tables = ["1","2","3"];
$scope.fun = function(){
  console.log($scope.a);
  console.log($scope.b);
}
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <form ng-submit="fun()">
  <select ng-model="a" ng-options="table as table for table in tables"></select>
  <input type="text" ng-model="b" />
  <input type="submit"/>Ok
</form>
</div>

Changed the array, still it is printing undefined – Piyush Shrivastava Apr 05 '17 at 09:25 — Piyush Shrivastava, Apr 05 '17 at 09:25
@Piyush Shrivastava can you create plnkr – Sachila Ranawaka Apr 05 '17 at 09:29 — Sachila Ranawaka, Apr 05 '17 at 09:29

ng-model in select not working with ng-submit

2 Answers2