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.
[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]
[html]
+ index.html
+ app.js
[/html]
[javascript]
$scope.degrees = [
{"degree_code":"BS","degree_name":"Bachelor of Science"},
{"degree_code":"NDUG","degree_name":"Non Degree Undergraduate"}
];
[/javascript]
[javascript]
$scope.degrees = [
{"degree_code":"BS","degree_name":"Bachelor of Science"},
{"degree_code":"NDUG","degree_name":"Non Degree Undergraduate"}
];
[/javascript]
[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]