kwv84 kwv84 - 4 months ago 32
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-change="selectChange"
ng-options="requestType.Id as requestType.Description for requestType
in requestTypes">
</select>

<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.requestRows.push(requestRow);
};

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

app.controller("PlanboardRequestCtrl", planboardRequestCtrl);
}(angular.module("planboardApp")));

Answer

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-change="selectChange()"
    ng-options="requestType as requestType.Description for requestType
    in requestTypes">
</select>

JS

$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

Comments