CODEWITHSUNDEEP
javascriptangularjsjson
seadrag0n
seadrag0n

Reputation: 848

angularjs - setting select element option value with JS object

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?

Upvotes: 0

Views: 1229

Answers (4)

himanshu
himanshu

Reputation: 208

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

Upvotes: 1

Quentin Lerebours
Quentin Lerebours

Reputation: 766

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>

Upvotes: 0

Gaurav Srivastava
Gaurav Srivastava

Reputation: 3232

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>

Upvotes: 0

kris_IV
kris_IV

Reputation: 2444

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.

Upvotes: 0

Related Questions