javascript - 如何设置自定义对象属性以在 Angular typeahead 中进行过滤？

Question

我正在尝试实现一个通用的 typeahead 指令。它采用选项列表和配置对象作为属性。配置对象的属性之一是“标签”——向用户显示什么以及如何过滤用户的查询。但是，我无法在过滤器表达式中使用此属性，如下所示:

 uib-typeahead="option as option[config.label] for option in options | filter:{ config[label] :$viewValue } 

当我尝试执行此操作时，出现以下错误:

Syntax Error: Token '[' is unexpected, expecting [:] at column 26 of the expression [options | filter:{ config[label] :$viewValue }] starting at [[label] :$viewValue }].

请帮忙!

Answer 1

ngOptions 想要接受一个对象作为过滤器。使用下面的语句，您尝试创建并向其传递一个动态键控对象，该对象无法以当前设置的方式内联完成，它是无效的 Javscript 语法:

... filter:{ config[label] :$viewValue }

解决这个问题的一种方法是在 Controller 中构造对象，然后将其传递给过滤器，请注意，我是按名称引用动态过滤器的值，而不是 $viewValue:

// controller
$scope.filterByObj[$scope.config['label']] = $scope.selectedFilter;

// template
... filter: filterByObj

我整理了一个例子来描述这个想法:http://plnkr.co/edit/7gffq3mEtFqrfAP4shrj?p=preview