html - 使用 Angular 的嵌套选项

Question

    $scope.senders = {}
    $scope.senders.list = [{name: NYC, supportedSendingMethods: ['Send by mail', 'Send by sms', 'c']}, {name: GEN, supportedSendingMethods: ['Send by mail','Send by sms','c']}];
    $scope.senders.selected = $scope.senders[0];
    $scope.senders.selectedSending = $scope.senders[0].supportedSendingMethods[0];

首先选择:

<select ng-model="senders.selected" ng-options="sender.name for sender in senders">
</select>
//This one works as expected

支持的发送方式:

<select ng-model="senders.selectedSending" ng-options="supp.supportedSendingMethods for supp in senders | filter:{name:senders.selected.name} ">
</select>

最后的选择显示所选发件人支持的所有发送方法。问题是第二个选择中的选项本身就是数组列表。

我怎样才能更深一层(使用过滤器)并显示

1) 显示支持的发送方法

2) 选定的发件人？

Answer 1

既然您已经将选择的发件人存储到 senders.selected 变量中，那么为什么不使用它呢？这是我认为的最佳选择:

ng-options="supp for supp in senders.selected.supportedSendingMethods"

只是为了回答最初的问题，我可能会提出两种方法来实现您对过滤表达式的需求。一种方法是只访问过滤集合的第一项 - angular.js 支持这样的表达式:

ng-options="supp for supp in (senders | filter:{name:senders.selected.name})[0].supportedSendingMethods "

另一种选择是为此定义单独的过滤器 - 它看起来会好一点:

ng-options="supp for supp in senders | filter:{name:senders.selected.name} | getFirst:'supportedSendingMethods'"

您可以在此处查看所有操作方式 - http://jsfiddle.net/GRaAL/WMAea/ .