使用 Bootstrap ui-typeahead 构建列表答案

【问题标题】：Build a list using Bootstrap ui-typeahead使用 Bootstrap ui-typeahead 构建列表
【发布时间】：2013-09-02 07:09:20
【问题描述】：

我正在尝试构建一个与本网站完全相同的标签输入字段。用户可以开始输入标签，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;
};

任何人都可以提供任何提示或建议吗？

【问题讨论】：

标签： angularjs bootstrap-typeahead

【解决方案1】：

试试这个而不是连接；

 $scope.program.Demographs = [];

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

【讨论】：

感谢您的回复。不幸的是，列表仍然被选定的值覆盖。我猜我需要破解 typeahead 代码来覆盖这种行为。

【解决方案2】：

在发现无法将项目添加到预输入输入字段中的现有选择后，我想我会自己回答这个问题。相反，您必须添加到不同的字符串或数组，而不是绑定到预先输入的那个。这是一个例子：

$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>

【讨论】：