Different value of selected option in AngularJS select ng-repeat

Question

I have a drop-down list that I'm trying to create where the value displayed in the drop-down is different to the options available - I'm using angularjs for this purpose. For example, if I had the following text, I'd want to display the full value when the user opens the drop-down:

A - A is for Apple

B - B is for Banana

But on the page I only want to display A or B, not the full description, as in this picture:

This is the closest I've got so far (where my list of objects are just objects with a Value and Description property) but I can't seem to show the short value in the dropdown, although I know I've seen this kind of set up online on various sites.

<select>
 <option ng-repeat="item in myObject.Options" value="{{item.Value}}" title="{{item.Description}}">{{item.Description}}</option>
</select>

Where the object would look something like

var myObject = { "Options" : [
{ "Value":"A" , "Description":"A is for Apple" },
{ "Value":"B" , "Description":"B is for Banana" },
{ "Value":"C" , "Description":"C is for Cherry" } ]};

Post the sample data of myObject.Options.

Prerak Sola
– Prerak Sola

2017-07-31 13:07:15 +00:00
Commented Jul 31, 2017 at 13:07 — Prerak Sola
– Prerak Sola, Commented Jul 31, 2017 at 13:07
@PrerakSola done! Hope that's acceptable.

loxdog
– loxdog

2017-07-31 13:14:57 +00:00
Commented Jul 31, 2017 at 13:14 — loxdog
– loxdog, Commented Jul 31, 2017 at 13:14

Santosh Shinde · Accepted Answer · 2017-07-31 14:39:43Z

2

This is not possible, because you have uses the HTML select component that is not able to distinguish between the displayed text in the dropdown and the shown value.

However you could build an own directive for implementing a similar behaviour, for example with a bootstrap dropdown menu or md-select.

For example :

 <md-select md-selected-text="selectedItem.Value" ng-model="selectedItem">
      <md-option ng-repeat="item in items" ng-value="item">
         {{ item.Description }}
     </md-option>
 </md-select>

Hope this will help you !

answered Jul 31, 2017 at 14:39

Santosh Shinde

6,0539 gold badges46 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

loxdog Over a year ago

Exactly what I needed to know - I wasn't sure if it was possible so thanks for clearing this up and I will use a method like this to create the functionality.

Prerak Sola · Accepted Answer · 2017-07-31 13:27:35Z

0

If you only want to display the Value part, you can use this:

<select>
    <option ng-repeat="item in myObject.Options" value="{{item.Value}}" title="{{item.Description}}">
        {{item.Value}} - {{item.Description}}
    </option>
</select>

Example:

var app = angular.module('app', []);

app.controller('TestController', function($scope) {

  $scope.myObject = {
    "Options": [{
      "Value": "A",
      "Description": "A is for Apple"
    }, {
      "Value": "B",
      "Description": "B is for Banana"
    }, {
      "Value": "C",
      "Description": "C is for Cherry"
    }]
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller='TestController'>
  <select>
    <option ng-repeat="item in myObject.Options" value="{{item.Value}}" title="{{item.Description}}">{{item.Value}} - {{item.Description}} </option>
  </select>
</div>

edited Jul 31, 2017 at 13:27

answered Jul 31, 2017 at 13:16

Prerak Sola

10.1k8 gold badges39 silver badges77 bronze badges

1 Comment

loxdog Over a year ago

That just displays the values in the dropdown, not a combination of values and descriptions as requested in the post.

Collectives™ on Stack Overflow

Different value of selected option in AngularJS select ng-repeat

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related