- SPLessons

How to set option value using ng:Options

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


       <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>

Project file structure


     + index.html
     + app.js 

JSON Object

 

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

app.js

 

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

index.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>