getting specific selected text from md-select when the option has many keys

Question

I have this array of objects:

[
     {
          name: "Dubai",
          transformed_cost: 50,
          delivery_time: 30
     },
     {
          name: "Abu Dhabi",
          transformed_cost: 15,
          delivery_time: 7
     },
     {
          name: "Shariqah",
          transformed_cost: 50,
          delivery_time: 4
     }
]

I'm using this array inside md-select as following:

<md-select ng-model='delivery_zone' md-selected-text="getSelectedText()">
    <md-optgroup label="Destinatios">
        <md-option ng-repeat='z in deliveryZones'>
            <div flex layout='row' layout-align="space-between" >
                <span>{{ z.name}}</span>
                <span>{{z.transformed_cost}} AED</span>
                <span style="display: block;">Delivery in: {{   z.delivery_time}}</span>
            </div>
        </md-option>
    </md-optgroup>
</md-select>

the getSelectedText() function I'm using:

$scope.getSelectedText = function() {
    if ($scope.delivery_zone !== undefined) {
        return $scope.delivery_zone;
    }
    else {
        return "Please select a destenation";
    }
};

It returns the whole option as you can see here:

I need to print out inside the options just the name key (Dubai, Abu Dhabi) without transformed_cost and delivery_time.

How can I make it?

Answer 1

I think the problem is that you are missing ng-value for the md-option having ng-repeat hence we are getting the label being shown. The solution will be as follow.

First add ng-value to the ng-option.

<md-option ng-repeat='z in deliveryZones' ng-value="z">

Then you need to change the function to.

$scope.getSelectedText = function() {
    if ($scope.delivery_zone !== undefined) {
        return $scope.delivery_zone.name;
    }
    else {
        return "Please select a destenation";
    }
};

here is a demo for the same!

JSFiddle Demo

I would like to comment that, you don't need the function itself, You can just write it as.

<div ng-app='home' ng-controller="MainCtrl">
  <md-select ng-model='delivery_zone' md-selected-text="delivery_zone()">
    <md-optgroup label="Destinatios">
      <md-option ng-repeat='z in deliveryZones'>
        <div flex layout='row' layout-align="space-between">
          <span>{{ z.name}}</span>
          <span>{{z.transformed_cost}} AED</span>
          <span style="display: block;">Delivery in: {{   z.delivery_time}}</span>
        </div>
      </md-option>
    </md-optgroup>
  </md-select>
</div>

JSFiddle Demo