ng-model having a string value and ng-option integer

Question

Here is my JSON array:

array=[ {id:1, name:'A'} , {id:2, name:'B'} ]

And in ng-model I am setting value which may be string like

modelValue='1'

I had ng-option

ng-option="option.id as option.name for option in array"
ng-model="modelValue"

But it is not showing selected value of ng-model in select

typo : ng-optionS, you forgot the 's'. – Walfrat Dec 02 '16 at 10:23 — Walfrat, Dec 02 '16 at 10:23
@Walfrat That was typo while typing in stack – Pooja-G Dec 02 '16 at 13:01 — Pooja-G, Dec 02 '16 at 13:01

score 2 · Accepted Answer · edited May 23 '17 at 12:25

And in ng-model I am setting value which may be string like

You should provide the same primitive or object type to your $scope.modelValue as of id. This is the preferred way.

If only the JSON array is being fetched dynamically AND type consistency is not guaranteed then you can apply a function to convert it to the type that is set to $scope.modelValue

In HTML

<select ng-model="modelValue" ng-options="getId(option.id) as option.name for option in myarray"> 

</select>

In Controller

$scope.modelValue='1';

$scope.myarray=[ {id:1, name:'A'} , {id:2, name:'B'} ];

$scope.getId = function(id)
{
   if(typeof $scope.modelValue == "string")
     return String(id);
   else if(typeof $scope.modelValue == "number")
     return parseInt(id);
}

COMPLETE EXAMPLE

Also see this answer

score 0 · Answer 2 · answered Dec 02 '16 at 10:06

0

Here is a working JSFiddle example based on your description: http://jsfiddle.net/9pLdgmm1/1/

You should use ng-options instead of ng-option

<select ng-options="p.name for p in people"
        ng-model="selectedPerson">
</select>

answered Dec 02 '16 at 10:06

Tome Pejoski

1,582
2
10
34

I have integer value in ng-option and string in model. – Pooja-G Dec 02 '16 at 12:51
Thank you. But I got the perfect solution what I want by Nishant123 – Pooja-G Dec 02 '16 at 12:57

score 0 · Answer 3 · answered Dec 02 '16 at 10:09

You should take ng-options instead of ng-option, als you should take integer itself instead of string..

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="modelValue" ng-options="option.id as option.name for option in names">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = [ {id:1, name:'A'} , {id:2, name:'B'} ]
    $scope.modelValue = 1;
});
</script>

<p>This example shows how to fill a dropdown list using the ng-options directive.</p>

</body>
</html>

Please run the above snippet

Here is a Working DEMO

score 0 · Answer 4 · answered Dec 02 '16 at 10:17

0

This should not be selected, because of all id is in numbers. If you want to make it select, then parse your $scope.modelValue to numbers like this.

$scope.modelValue= parseInt("1");

Also change your ng-options instead of ng-option

answered Dec 02 '16 at 10:17

Masum Billah

2,209
21
20

Mistalis · Answer 5 · 2017-07-05T08:20:53.947

You have a syntax error in ng-options:

<select ng-options="option.name for option in array" ng-model="modelValue"></select>

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function($scope) {
  $scope.array = [{
    id: 1,
    name: 'A'
  }, {
    id: 2,
    name: 'B'
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <fieldset ng-controller="FirstCtrl">
    <select ng-options="option.name for option in array" ng-model="modelValue"></select>
    modelValue is: {{modelValue}}
  </fieldset>
</div>

ng-model having a string value and ng-option integer

5 Answers5