kwv84 kwv84 - 1 year ago 116
AngularJS Question

AngularJS how to get label and value from selected

I have a dropdown (select) that is populated via web api. The return of the web api has the following structure:

"Id": 1,
"Description": "A description"

What I need is, when I select an option I want to have de corresponding label (or text) and value. This is what I have:

<select class="form-control" ng-model="requestTypeList"
ng-options="requestType.Id as requestType.Description for requestType
in requestTypes">

<input type="text" ng-model="RequestTypeID" /><br/>
<input type="text" ng-model="RequestTypeDescription" />

My controller looks like this:

(function (app) {
var requestCtrl = function ($scope, $http, requestTypeService) {

$scope.requestRows = [];

$scope.selectChange = function() {
$scope.RequestTypeID = $scope.requestTypeList.value;
$scope.RequestTypeDescription = $scope.requestTypeList.label;

requestTypeService.getAll().success(function (data) {
$scope.requestTypes = data;

$scope.addRequest = function () {

var requestRow = {
RequestTypeID: $scope.RequestTypeID, // Here I need the selected value
RequestTypeDescription: $scope.RequestTypeDescription, // Here I need the selected Description
EventColor: $scope.EventColor


$scope.removePlanboardRequest = function (index) {
$scope.planboardRequests.splice(index, 1);

app.controller("PlanboardRequestCtrl", planboardRequestCtrl);

Answer Source

Set ng-options to select the whole object instead of just it's ID .

Also fix missing () in ng-change

Fix invalid label and value properties in selectChange ()

<select class="form-control" ng-model="requestTypeList"
    ng-options="requestType as requestType.Description for requestType
    in requestTypes">


$scope.selectChange = function() {
    $scope.RequestTypeID = $scope.requestTypeList.Id;
    $scope.RequestTypeDescription = $scope.requestTypeList.Description;

By setting ng-options to select whole object you really wouldn't need to use individual variables like RequestTypeID and RequestTypeDescription since everything you need for the view or for $http is already in requestTypeList

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download