- SPLessons

How to set option value using ng:Options

Home > > Tutorial
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

How to set option value using ng:Options

How to set option value using ng:Options

If you would like to set the key pair value in select using ng-options then here is quick solution for that. I knew you are running out of time so here is the quick solution.
  • We have JSON object named as degrees and it contains (key, value) pair data like (degree_code, degree_name).
  • If you would like to set the select option value attribute with key using ng-options of AngularJS then simple pass like express like below that's all.
  • Here we are specifying the select options display text " degree.degree_name " and set select option value attribute by " track by degree.degree_code ".
Step 1) We have created degree object then copy the data from degrees JSON object. Step 2) Specified the what value goes in select option display text by " degree.degree_name " expression. Step 3) Specified the what value goes in select option value attribute by "track by degree.degree_code " expression.

Quick Solution

[html] <select name="degree" class="form-control" ng-model="selecteddegree" ng-options="degree.degree_name for degree in degrees track by degree.degree_code" > <option value=""> Select Degree </option> </select> [/html]

Project file structure

[html] + index.html + app.js  [/html]

JSON Object

[javascript]  $scope.degrees = [ {"degree_code":"BS","degree_name":"Bachelor of Science"}, {"degree_code":"NDUG","degree_name":"Non Degree Undergraduate"} ]; [/javascript]

app.js

[javascript]  $scope.degrees = [ {"degree_code":"BS","degree_name":"Bachelor of Science"}, {"degree_code":"NDUG","degree_name":"Non Degree Undergraduate"} ]; [/javascript]

index.html

[html] <!DOCTYPE html> <html ng-app="splessonsApp"> <head lang="en"> <meta charset="utf-8"> <title>SPLessons</title> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"> </head> <body ng-controller="splessonsController"> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Select Degree: </label> <div class="col-sm-10"> <select name="degree" class="form-control" ng-model="selecteddegree" ng-options="degree.degree_name for degree in degrees track by degree.degree_code" > <option value=""> Select Degree </option> </select> </div> </div> </form> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js" type="text/javascript" ></script> <script src="app.js" type="text/javascript"></script> </body> </html> [/html]