使用Bootstrap ui typeahead构建一个列表

Question

我正在尝试构建一个与本网站上的标签输入字段完全相同的标签输入域。用户可以开始键入标签，ui typeahead返回一个列表，用户从中选择一个结果，并将其添加到输入字段中已有的标签列表中。

我首先将问题简化为字符串串联，而不是列表。我甚至不能让它发挥作用。这就是我要做的，但它没有与字段的现有值连接，而是替换它：

<input class="form-control" type="text" ng-model="program.Demographs"
    typeahead="d for d in program.providers.Demographs"
    typeahead-min-length='3' typeahead-items='10'
    typeahead-editable="false"
    typeahead-on-select="addItem(program.Demographs)">

以下是应该连接字符串的函数：

$scope.addItem = function (item) {
    $scope.program.Demographs = $scope.program.Demographs + item;
};

有人能提供一些提示或建议吗？

Answer 1

试试这个，而不是串联；

 $scope.program.Demographs = [];
    $scope.addItem = function (item) {
        $scope.program.Demographs = $scope.program.Demographs.push(item);
    };

Answer 2

我想我应该自己回答这个问题，因为我发现不可能在typeahead输入字段中向现有选择添加项目。相反，您必须添加到另一个字符串或数组，而不是绑定到typeahead的字符串或数组。这里有一个例子：

$scope.addDemograph = function (item) {
    if ($scope.program.Demographs.indexOf(item) == -1) {
        $scope.program.Demographs.push(item);
    }
    $scope.demographs_input = [];
};
<input class="form-control" type="text" placeholder="Demographs"
   ng-model="demographs_input"
   typeahead="d for d in program.providers.Demographs"
   typeahead-on-select="addDemograph(demographs_input)"> // adds input val to list
<ul class="list-inline">
<li ng-repeat="d in program.Demographs"></li> <!--this list is added to automagically-->
</ul>