MD-選択するオプションは、私は、オブジェクトのこの配列を持っている多くのキー

Question

を持っているときから、特定の選択したテキストの取得：私は、次のようmd-select内のこの配列を使用してい

[ 
    { 
      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 
    } 
] 

を：

<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> 

私が使用しているgetSelectedText()機能：

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

私はtransformed_costとdelivery_timeのないオプションだけ 名キー（ドバイ、アブダビ）の内側にプリントアウトする必要が

：あなたがここに見ることができるように

は、それは全体のオプションを返します。

どうすればいいですか？

Answer 1

私は問題がのmd-optionにありますので、ng-repeatが表示されています。解決策は次のとおりです。

最初ににng-valueを追加します。

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

次に、この関数をに変更する必要があります。

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

ここでは同じもののデモです！

JSFiddle Demo

私は、あなたが関数自体を必要としない、あなただけのようにそれを書くことができることをコメントしたいと思います。

<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

Answer 2

こんにちは私は排除するためにオプトイン変数を追加しました

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

JSこの

<md-select ng-model='delivery_zone'> 
    <md-optgroup label="Destinatios"> 
    <md-option ng-value="opt" ng-repeat='opt in deliveryZones' ng-click="getSelectedText(opt)"> 
     <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> 

を試してみてください

return $scope.delivery_zone.name; 

Answer 3

のようなあなたの関数から単純名を返すことができます複製。それに加えて、親md-selectのng-changeではなく特定のオプションをng-clickしています。これがあなたの問題を解決することを願っています。