How to get option text value using AngularJS?

Question

I'm trying to get a text value of an option list using AngularJS

Here is my code snippet

<div class="container-fluid">
        Sort by:
        <select ng-model="productList">
            <option value="prod_1">Product 1</option>
            <option value="prod_2">Product 2</option>
        </select>
</div>

<p>Ordered by: {{productList}}</p>

{{productList}} returns the value of the option, eg: prod_1. I'm trying to get the text value 'Product 1'. Is there a way to do this?

score 63 · Accepted Answer · edited May 30 '17 at 15:53

63

The best way is to use the ng-options directive on the select element.

Controller

function Ctrl($scope) {
  // sort options
  $scope.products = [{
    value: 'prod_1',
    label: 'Product 1'
  }, {
    value: 'prod_2',
    label: 'Product 2'
  }];   
}

HTML

<select ng-model="selected_product" 
        ng-options="product as product.label for product in products">           
</select>

This will bind the selected product object to the ng-model property - selected_product. After that you can use this:

<p>Ordered by: {{selected_product.label}}</p>

jsFiddle: http://jsfiddle.net/bmleite/2qfSB/

edited May 30 '17 at 15:53

Nate Anderson

18,334
18
100
135

answered Jan 27 '13 at 22:42

bmleite

26,850
4
71
46

3

The value attributes of the – vcardillo Jul 29 '13 at 02:08
Thanks... But can you advise me a way to access the selected option from the controller file? – Kailas Sep 24 '14 at 07:31
@Kailas in this case you would use `$scope.productList` – bmleite Sep 24 '14 at 09:09
Then how to set the selected item of the select list, based on the value field of products, for example: product_2? I know we can set the selected item using the index of the product list like $scope.products[1], but this is not what I'm looking for. – tala9999 Jun 23 '16 at 12:02
tala9999 the productList is a JSON object, it has both value and label – Azmeer Jan 26 '17 at 04:10

score 10 · Answer 2 · edited Nov 25 '13 at 23:35

10

Instead of ng-options="product as product.label for product in products"> in the select element, you can even use this:

<option ng-repeat="product in products" value="{{product.label}}">{{product.label}}

which works just fine as well.

edited Nov 25 '13 at 23:35

Matthew Strawbridge

19,940
10
72
93

answered Nov 25 '13 at 23:15

webacs.com.au

117
1
2

1

Additional info from the docs: ngRepeat can be used on – Ryan Allen Nov 18 '14 at 14:49
1

this works great when using string values, json and objects do not work as well. – Clocker Aug 20 '15 at 19:23

score 5 · Answer 3 · answered Jul 22 '15 at 12:02

5

Also you can do like this:

<select class="form-control postType" ng-model="selectedProd">
    <option ng-repeat="product in productList" value="{{product}}">{{product.name}}</option>
</select>

where "selectedProd" will be selected product.

answered Jul 22 '15 at 12:02

Bohdan Kolesnyk

135
2
7

1

This worked for me to get only the value and not the whole object. Thanks – Alin Jun 07 '17 at 11:37

score 1 · Answer 4 · answered Sep 30 '16 at 21:35

<div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select name="repeatSelect" id="repeatSelect" ng-model="data.model">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <tt>model = {{data.model}}</tt><br/>
</div>

AngularJS:

angular.module('ngrepeatSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    model: null,
    availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ]
   };
}]);

taken from AngularJS docs

How to get option text value using AngularJS?

4 Answers4

Linked