angularjs - setting select element option value with JS object

Question

I am new to AngularJS so please bear with me.

Following is the the JSON string I am trying to bind in the select element:

[
{"Name":"Value 1","ID":1},
{"Name":"Value 2","ID":2},
{"Name":"Value 3","ID":3},
{"Name":"Value 4","ID":4}
]

Following is the JS object for the same:

function NameValue(nameValue){
    var self = this;
    self.ID = nameValue.ID;
    self.Name= nameValue.Name;    
}

I am parsing the above JSON string, looping through the objects and pushing items into an array using the above JS object like:

angular.forEach(angular.fromJson(jsonString), function (value, key) {
                $scope.Values.push(new NameValue(value));
            });

Following is my select with agularjs bindings:

<select ng-model="SelectedName" ng-options="x.Name for x in Values">/select>

When I select a value in the select element, the entire NameValue object is getting set into the SelectedName property which is what I am trying to do. Now when I try to set the SelectedName property dynamically, the value is not getting selected and an empty option element is getting added in the select element. I used the {{SelectedName}} to check the value when set dynamically and when I select the same value in the select element manually and both are {"ID":2,"Name":"DAO"} which are exactly same. What am I doing wrong here?

Did you initialize the SelectedName in the ng-view directive? — Jordi Flores
– Jordi Flores, Commented Jul 25, 2017 at 9:42

himanshu · Accepted Answer · 2017-07-25 10:36:11Z

1

The syntax of ng-options is something like this.link

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>

Suppose you have controller like this

app.controller('MainCtrl', function($scope) {
  $scope.Values = [
{"Name":"Value 1","ID":1},
{"Name":"Value 2","ID":2},
{"Name":"Value 3","ID":3},
{"Name":"Value 4","ID":4}
];

$scope.SelectedByName='Value 2'; //Default setting drop down by Name property
$scope.SelectedById=4; //Default setting drop down by ID property

});

If you follow the below syntax then either name or Id property will be set to selected variable.

If you need default selection of drop down then you need to set the respective model in controller.(as above)

HTML :

<body ng-controller="MainCtrl">
    By name :
    <select ng-options="value.Name as value.Name for value in Values" 
    ng-model="SelectedByName" ng-change="Print()"></select> 
    Selected value is : {{SelectedByName}}
    <br>
    By ID :
    <select ng-options="value.ID as value.Name for value in Values" 
    ng-model="SelectedById" ng-change="Print()"></select>
    Selected id is : {{SelectedById}}
  </body>

Demo plunker Click here

answered Jul 25, 2017 at 10:36

himanshu

2083 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

seadrag0n Over a year ago

looks very straight forward but what if I want to set entire object {"ID":2,"Name":"DAO"} in the select option value instead of name or id? They syntax which I have used for ng-options is setting the entire object in the ng-model property and setting it from the controller is not working

himanshu Over a year ago

Check the updated plunker here

seadrag0n Over a year ago

I have updated the plunkr with my requirement as I am getting the full object from server and binding the same to select doesn't work, link: plnkr.co/edit/p32Voi6pvuhTeJwHX9KX?p=preview

himanshu Over a year ago

Use track by like this <select ng-options="value as value.Name for value in Values track by value.ID" ng-model="SelectedByObj"></select>

seadrag0n Over a year ago

this is working, I have updated the plunker plnkr.co/edit/p32Voi6pvuhTeJwHX9KX?p=preview

kris_IV · Accepted Answer · 2017-07-25 09:50:42Z

0

First of all - you should initialize SelectName in your $scope.

Next you can use:

ng-options="x.id as x.name for x in values"

Can you display {{values}} in your template and it's look good? Maybe you have a problem with redraw template when data is push into value. Check this way also.

answered Jul 25, 2017 at 9:50

kris_IV

2,4642 gold badges26 silver badges43 bronze badges

Comments

Gaurav Srivastava · Accepted Answer · 2017-07-25 09:51:29Z

here is a working snippet. i guess you didn't defined Values as an array, before pushing anything you have to define the variable as an array.

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

function NameValue(nameValue) {
  var self = this;
  self.ID = nameValue.ID;
  self.Name = nameValue.Name;
}

app.controller('myCtrl', function($scope) {
$scope.Values = [];
  $scope.jsonString = [{
    "Name": "Value 1",
    "ID": 1
  }, {
    "Name": "Value 2",
    "ID": 2
  }, {
    "Name": "Value 3",
    "ID": 3
  }, {
    "Name": "Value 4",
    "ID": 4
  }];

  angular.forEach(angular.fromJson( $scope.jsonString), function (value, key) {
                $scope.Values.push(new NameValue(value));
            });
            
    console.log($scope.Values);        
});

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

<body>

  <div ng-app="myApp" ng-controller="myCtrl">
    <select ng-model="SelectedName" ng-options="x.Name for x in Values">/select>
  </div>

</body>

</html>

Quentin Lerebours · Accepted Answer · 2017-07-25 09:52:22Z

0

I had the same issue and i found a solution: Don't use ng-options but <option> tag

<select ng-model="..."> <option ng-repeat="..."> {{ ... }} </option></select>

answered Jul 25, 2017 at 9:52

Quentin Lerebours

7667 silver badges22 bronze badges

Collectives™ on Stack Overflow

angularjs - setting select element option value with JS object

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related