从md- select选项有多个键时，从md-获取特定select

Question

我有这个对象数组：

[
     {
          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 中使用这个数组如下：

<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";
    }
};

它 returns 整个选项，您可以在此处看到：

我只需要在选项中打印 name 键（迪拜，阿布扎比），而不需要 transformed_cost 和 delivery_time。

我怎样才能做到？

Answer 1

你好，你可以return你的函数的简单名称，比如

return $scope.delivery_zone.name;

Answer 2

试试这个

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

JS

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

我添加了 opt 变量以消除重复。除此之外，我正在对特定选项执行 ng-click，而不是对父 md-select 执行 ng-change，我希望这能解决您的问题。

Answer 3

我认为问题在于您缺少 ng-value 而 md-option 具有 ng-repeat 因此我们正在显示标签。解决方法如下。

首先将ng-value添加到ng-option。

<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

从md- select选项有多个键时，从md-获取特定select

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

angularjs

angularjs-material