Angular + Material Autocomplete：如何将某些值仅绑定到 md-option 中的模型

Posted 2023-03-13

【中文标题】Angular + Material Autocomplete：如何将某些值仅绑定到 md-option 中的模型

【英文标题】：Angular + Material Autocomplete: How to bind certain values only to model in md-option

【发布时间】：2016-04-22 12:45:30

【问题描述】：

我在当前项目中使用 Angular 和 Angular Material。我正在为某个组件使用自动完成功能 (https://material.angularjs.org/latest/demo/autocomplete)，但是，我一直在努力仅将某些属性绑定到为某个值返回的模型。

我的问题是在下面的情况下，如何只将单个或某些值绑定到模型？

在此示例中，我有一个要填充 md-select 的 country.json 文件，以及几个键/值对：

"name":"Australia","tld":".au","cca2":"AU","ccn3":36,"cca3":"AUS","currency":"AUD","calling-code":"61","alt-spellings":"AU","relevance":1.5,"region":"Oceania","subregion":"Australia,New Zealand"

HTML： 我的 html 只是使用自动完成组件，但我尝试使用 ng-value 仅将“cca2”值绑定到模型，没有任何运气。

<ol-lookup-input 
items="vm.allCountries" 
ng-value="vm.allCountries.cca2" 
selected-items="vm.filter.value" 
search-field="name" 
placeholder="Type to add a country">
</ol-lookup-input>

当前用户界面：

出于显而易见的原因，我不想将所有国家/地区详细信息发送回后端，并且可以有多个值，这会使负载非常混乱。

理想的用户界面：

我真正想要的只是发送与每个国家/地区关联的“cca2”值数组，如下所示：

【问题讨论】：

您似乎有一个自定义指令md-select/md-autocomplete。理想情况下，我们需要知道它有什么帮助。也许你可以提供一个简单的 codepen，它也支持 typescript。

【参考方案1】：

由于您没有提供 ol-lookup-input 指令的代码，因此我无法显示完全适合您的情况的代码。但是，我仍然可以想到两种解决方案。

解决方案 1

在您的控制器中创建两个单独的数组：一个用于芯片组件（我想带有 cca2 代码的数组对此还不够，因为您想在芯片上显示一个国家/地区名称）和第二个用于后端（仅使用 cca2 代码）。您可以附加一个函数，当用户选择一个国家/地区时将触发该函数，可以使用 md-autocomplete 中的 md-selected-item-change 属性或在芯片组件中使用 md-transform-chip 并使用它来填充第二个模型。

解决方案 2

我猜您的代码中有一个函数可以将选定的国家/地区发送到后端。您可以在将 cca2 代码发送到服务器之前从您选择的国家模型中取出它们。