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

它返回整个选项，如下所示：

我需要在选项内打印名称键（迪拜，阿布扎比），而不需要updated_cost和delivery_time。

我该怎么做？

Answer 1

试试这个

<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变量以消除重复。除此之外，我正在点击特定选项而不是在父md-select上进行ng-change，我希望这可以解决您的问题。

Answer 2

我认为问题在于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";
    }
};

然后您需要将功能更改为。

<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

我想评论一下，你不需要函数本身，你可以把它写成。

"

import cucumber.api.PendingException;
import cucumber.api.java.en.And;
import cucumber.api.java.en.Given;
import cucumber.api.java.en.Then;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class MyStepdefsss {
   public WebDriver driver;
    @Given("^go to desire web page$")
    public void go_to_desire_web_page() throws Throwable {
        System.setProperty("webdriver.chrome.driver" , "C:\\Users\\muhammad.ilyas\\chromedriver.exe");
        driver = new ChromeDriver();
        driver.get("https://www.youtube.com/watch?v=55vJUqHSbkQ");

    }
"

JSFiddle Demo

Answer 3

您好，您可以从函数返回简单名称，如

return $scope.delivery_zone.name;

当选项有许多键时，从md-select获取特定的选定文本

3 个答案: