Angular-UI Bootstrap Typeahead，多输出？

Question

所以我正在使用 Typeahead 从 json 文件中获取一些信息。让它工作，没问题。但是当我在第一个中选择了一个对象时，我想 "autocomplete" 一些其他输入字段。

假设第一个字段如下所示：

<input type="text" class="form-control" id="supertag" ng-model="selected" uib-typeahead="title.title for title in tags | filter:$viewValue | limitTo:8"/>

它在那个输入字段中显示 title.title，太棒了！我试图通过几种方式解决这个难题，但当第一个输入字段被选中并准备就绪时，我似乎无法填充其余的输入字段。我想在下一个上有类似 title.subtitle 的内容，但它似乎不是那么简单。

我错过了什么？这不起作用，例如：

<input type="text" class="form-control" id="rubrik" value="{{title.subtitle}}"/>

谢谢！

编辑： json 看起来像这样：

{
 title: 'title',
 subtitle: 'subtitle',
 id: 'id'
},
{
 title: 'title',
 subtitle: 'subtitle',
 id: 'id'
},

编辑：用于比较不同 json 文件的更多代码。

这就是输入字段指向的内容：

$http.get(tagUrl)
        .then(function(res) {
            $scope.tags = res.data;
        })

和 onSelect：

$scope.onSelect = function($item, $model, $label) {
        $scope.id = $item.id;
        $scope.title = $item.title;
        $scope.selected = $item.selected;
        $scope.subtitle = $item.subtitle; <- undefined because it only exists in JSON2, not in JSON1.
        console.log($scope.id);
    };

这里是我希望函数对输入 ID 进行比较的地方。它将始终存在于 JSON1 (tagUrl) 中，但我还希望它在继续之前查看它是否存在于 JSON2 (superUrl) 中（并且，如果存在，则将 $scope.subtitle = $item.subtitle 设置为相应的输入字段）。我用 if 语句尝试了不同的方法，但在最好的情况下，我得到了未定义。

我有这个用于 ng-repeat，它列出了页面上的所有 superUrls，这可能对获得我想要的内容有用。

$http.get(listSuperUrl)
        .then(function(res) {
            $scope.current = res.data;
        })

Answer 1

您需要将 typeahead-on-select="vm.onSelectItem($item, $model, $label) 添加到 supertag 输入元素，（如果您将控制器用作 vm）或 typeahead-on-select="onSelectItem($item, $model, $label)（如果您在控制器中使用 $scope）。 onSelectItem 可以随意命名，这是我用来说明的函数

<input type="text" ng-model="subtitle" class="form-control" id="rubrik"/>

在您的视图中完成后，转到您的控制器，定义：

vm.onSelectItem = function($item, $model, $label){
  /*bind your subtitle ngModel to $item.subtitle*/
  vm.subtitle = $item.subtitle;
}

或

$scope.onSelectItem = function($item, $model, $label){
 /*bind your subtitle ngModel to $item.subtitle*/
 $scope.subtitle = $item.subtitle;
}

这应该可以为您完成，如果没有，请告诉我，因为我没有在代码中尝试过。

Angular-UI Bootstrap Typeahead，多输出？

Angular-UI Bootstrap Typeahead, multiple output?

angularjs

bootstrap-typeahead

angular-ui-bootstrap

angular-ui-typeahead