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?

Bucci

Answer 1

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/

Resinoid

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. – Maeda

Thanks... But can you advise me a way to access the selected option from the controller file? – Apostolate

@Apostolate in this case you would use $scope.productList – Resinoid

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. – Gibbosity

tala9999 the productList is a JSON object, it has both value and label – Faustino

Answer 2

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.

Transvestite

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. – Popedom

this works great when using string values, json and objects do not work as well. – Picket

Answer 3

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.

Behind

This worked for me to get only the value and not the whole object. Thanks – Parfait

Answer 4

<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

Lesbianism