javascript - 根据与对象属性匹配的下拉选项过滤列表

Question

我的页面上有一个项目列表(使用 ng-repeat 的 li 元素)和一个下拉菜单(使用 ng-options 选择元素)。当下拉选择与项目的特定属性匹配时，我只想显示那些匹配的项目。

列表项对象如下所示:

var foo = {
    someProperty: 'someValue',
    someOtherProperty: 'someOtherValue',
    items: [{
        propertyIWantToMatchOn: 'someImportantValue', /* Note that there will be a lot of items, but they all contain this property */
        someDisplayText: 'this can be arbitrary'
    }]
};

有时列表项的 propertyIWantToMatchOn 值为 someImportantValue，有时它们的值为 someOtherImportantValue。

我的选择列表如下所示:

var myChoices = [
    {name: 'someImportantValue'},
    {name: 'someOtherImportantValue'}
];

我的选择下拉菜单如下所示:

<select ng-model="mySelectedChoice" ng-options="myChoice.name for myChoice in myChoices"></select> 

我的列表项生成如下:

<ul>
    <li ng-repeat="item in foo.items | filter:{propertyIWantToMatchOn: mySelectedChoice}">{{item.someDisplayText}}</li>
</ul>

使用当前过滤器，无论选择什么选项，我的列表中都不会显示任何内容。如果我删除过滤器，无论选择什么，所有项目都会显示。

如何修改过滤器/我的代码，以便我只能显示其属性与下拉列表中的选择相匹配的项目？

干杯!

编辑:如果我在 Controller 中将 mySelectedChoice 硬编码为与我尝试匹配的属性值相匹配的字符串，则列表会正确过滤。所以我想现在我需要弄清楚如何将选择保存为 name 的值而不是对象本身。

Answer 1

将ng-option与as一起使用，以便您可以更新ng-model中的name。然后在ng-repeat的过滤条件中使用list的ng-model

查看此 example

<select ng-model="mySelectedChoice" ng-options="myChoice.name as myChoice.name for myChoice in myChoices"></select> 

 selceted value is {{mySelectedChoice}}

 <ul ng-show="mySelectedChoice">
      <li ng-repeat="item in foo.items | filter:{propertyIWantToMatchOn: mySelectedChoice}">{{item.someDisplayText}}</li>
 </ul>