Angular 正式与 Angular ui bootstrap typeahead 动态选项答案

【问题标题】：Angular formly with angular ui bootstrap typeahead dynamic optionsAngular 正式与 Angular ui bootstrap typeahead 动态选项
【发布时间】：2016-09-29 16:24:30
【问题描述】：

我正在尝试让 Angular 形式和 Angular ui bootstrap typeahead 播放得很好。我想要的是从 http get 请求中填充我的选择列表，并且每次选择字段发生更改时，它都应该触发一个函数来获取新的选项列表。

typeahead="address for address in getLocation($viewValue)"

我不确定我的 jsbin 是否正确，但我们开始吧。

JsBin of my problem

这是一个单独使用预输入的 plunker。

dynamic typeahead works here

我什至无法启动 getLocation 函数。我试过 vm.getLocation，但没有骰子。

非常感谢您的帮助！

谢谢。 ;-)

【问题讨论】：

标签： angular-formly

【解决方案1】：

Async select options Watchers Example

最初选项应该是一个空数组，并如上所示传入。然后你需要添加一个观察者来更新 $scope.options.templateOptions.options 作为它的调用。

但是，我仍然无法通过提前输入来回答功能。在 typeahead 文档中，您可以使用回调来知道它何时被选中。

typeahead-on-select='onSelect($item, $model, $label)'

我在控制器中的 onSelect 函数永远不会被调用。

【讨论】：

这是两个独立的链接。

【解决方案2】：

这是一个工作示例...我将 Async formly 示例与 UI Bootstrap 示例相结合...注意它现在变为 item.question for item 而不是 item for item...

不确定为什么会这样，我检查了一下，它的格式与 Async 示例返回的格式相同...尝试了各种方法让它显示完整的 JSON 对象，但没有运气...

如果我将其设置为逐项，则整个 JSON 对象会显示在模型中，但搜索会返回 [object Object]，否则它只是我设置为标签的单行，我猜是相同的方式正常显示，没关系...

不管怎样，它可以工作

http://plnkr.co/IjuJ0HPGCKfZAOrK0u3z?p=preview

      app.run(function(formlyConfig) {
          formlyConfig.setType({
              name: 'typeahead',
              template: '<input type="text" ng-model="model[options.templateOptions.label]" uib-typeahead="item.question for item in to.options | filter:$viewValue | limitTo:15" class="form-control">',
              wrapper: ['bootstrapLabel', 'bootstrapHasError'],
    });
  });

【讨论】：