37

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?

4 Answers 4

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/

5
  • 3
    The value attributes of the <option> tags, however, appear to be set incrementally as 0 and 1, not taking on the value property from the object literal.
    – vcardillo
    Jul 29, 2013 at 2:08
  • Thanks... But can you advise me a way to access the selected option from the controller file?
    – Kailas
    Sep 24, 2014 at 7:31
  • @Kailas in this case you would use $scope.productList
    – bmleite
    Sep 24, 2014 at 9: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, 2016 at 12:02
  • tala9999 the productList is a JSON object, it has both value and label
    – Azmeer
    Jan 26, 2017 at 4:10
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.

2
  • 1
    Additional info from the docs: ngRepeat can be used on <option> elements instead of ngOptions to achieve a similar result. However, the ngOptions provides some benefits such as reducing memory and increasing speed by not creating a new scope for each repeated instance, as well as providing more flexibility in how the select's model is assigned via select as. ngOptions should be used when the select model needs to be bound to a non-string value.
    – Ryan Allen
    Nov 18, 2014 at 14:49
  • 1
    this works great when using string values, json and objects do not work as well.
    – Clocker
    Aug 20, 2015 at 19:23
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.

1
  • 1
    This worked for me to get only the value and not the whole object. Thanks
    – Alin
    Jun 7, 2017 at 11:37
1
<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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.