Search code examples
javascriptangularjsng-optionsangular-ngmodel

Binding both value and text in select dropdown in angular.js

I have this dropdown in my page

<select 
    ng-options="col.col_id as col.col_name for col in meta_data.x_cols"
    ng-model="obj.x">
</select>

Since the model is set to obj.x, I can access it using $scope.obj.x in any $scope function.

Naturally, it gives the value of the selected option. Is there any way by which I can get selected text as well? for e.g. bind obj.x to and obj.x_text to the text of selected option.

Solution

  • If you bind col and not col.col_id:

    <select 
    ng-options="col as col.col_name for col in meta_data.x_cols track by col.col_id"
    ng-model="obj.x">
</select>

    you will be able to access both col_id and col_name from $scope.obj.x:

    $scope.obj.x.col_id
$scope.obj.x.col_name