尝试在Plunker中重新创建Bootstrap3、AngularJS和Typeahead演示示例

我试图得到一个与引导3，角度和Typeahead工作Plunker，但我发现一些样式丢失，而且我的模型似乎没有正确绑定。我直接从演示页面复制了代码：

---

我是否在这里使用了所有正确的JS和CSS库

我找到了您发布的代码，并使用的源代码创建了AngularJS示例的完整功能，然后将其剥离，直到发现与您的代码不匹配。以下Plunker应该是您正在寻找的：

我对您的Plunker进行了以下更改以使其正常工作：

您的

bootstrap-tagsinput-angular-bs3.js

文件与我在上述存储库中找到的文件不匹配，因此我将其替换为存储库的代码。看来你是想用一种叫“霍根”的东西，这会引起问题。如果这很重要，请留下评论，说明它是什么以及为什么需要它，我会调查一下

我删除了

typeahead.js

和

hogan.js

依赖项。第一个是不需要的，因为

bootstrap标记sinput.js

已经使用了它，第二个是因为，同样，我不确定这是做什么的

由于某些原因，

$scope.getTagClass

函数中的

switch

语句返回无效的CSS类。我将其更改为以下内容：

case 'Europe'   : return 'label label-info';
case 'America'  : return 'label label-danger label-important';
case 'Australia': return 'label label-success';
case 'Africa'   : return 'label label-success'; // Note that 'label-inverse' made the object invisible
case 'Asia'     : return 'label label-warning';

您试图使用的BootstrapJS版本似乎不支持此Typeahead组件。我将

bootstrap.min.js

依赖项从v3.1.1更改为v2.3.2。也许这是一个未报告的bug，您应该对此进行研究

您删除了

$http

服务和

$scope.queryCities

函数，但这些是使组件正常工作所必需的。您试图通过直接加载

cities.json来跳过此操作，但这仅适用于Typeahead的初始填充，并将导致Typeahead预测文本功能无法正常工作。我在
$http
服务中向您的
CityTagsInputController
功能添加了新功能，并在控制器中添加了以下功能：

$scope.queryCities = function(query) {
    return $http.get('cities.json');
};

最后，传递到

bootstrap tagsinput

指令的属性有两个错误。如上所述，您不能直接将

cities.json

传递到

typeahead source

属性中。我将其更改为

querycities

。我还将

tagClass

属性改为

getTagClass

，而不是

getTagClass（city）

——该属性只需要函数名，而不需要任何参数（即使它需要，您一开始也从未定义过

city

）

---

我通过一次一个地将它们添加回完全功能的Plunk（上面的）中来确保上面的每个更改都是必要的，并且发现每个更改都破坏了代码。因此，您需要进行所有这些更改以使代码正常工作。希望这能有所帮助。

我不太确定您的最终目标是什么，但我创建了这个，这可能就是您想要的。如果是这样的话，我可以添加它作为一个解决方案，并解释我做了什么。谢谢，但我正试图获得一个标签编辑器功能与下拉和打字前进。根据这个Git项目：我相信我得到了你想要的，检查我下面的答案。我实际上使用了这里的一个分支：-我想这在这一点上没有完全测试，这就是为什么角度版本没有出现在Bootstrap 3版本的Bootstraps Tags Input live Demos页面上的原因：谢谢，这是一个很好的答案，虽然我在某些方面给了你一条红鲱鱼，对不起。我实际上是在使用这个页面中的pull请求：-它似乎还没有被合并，可能是因为它还没有完全工作。您的答案确实有效，因为从Bootstrap3降级到2.3.2，我正在尝试使用V3获得最新版本。但我刚刚发现，我的Angular Bootstrap UI版本不依赖于Bootstrap 3，实际上我可以降级到V2.3.2:）-谢谢你回答的标记。事实上，如果你想成为更多的超级英雄，也许你可以建议一种方法，我可以在字段焦点上弹出typeahead下拉列表？因此，当用户点击该字段时，他们可以立即使用向下箭头进行选择。。非常感谢您的任何想法！我建议使用

ng focus

将类（例如

.bootstrap tagsinput.focus

）应用到

bootstrap tagsinput

标记上，然后使用

attrs.$observe（）

在添加类时进行监控，并在回调函数中，在

显示：block

>根据上述指令自动生成的标签。如果你觉得这个方法听起来不错，再发一个问题，我会尽力回答！我喜欢这个主意。我现在提出了一个新问题，如果你能看一下，我将不胜感激：我离解决这个问题已经很近了！我可以像这样检测焦点：

$（'.bootstrap tagsinput input'）.focus（函数（）{alert（“focus”）；}）现在，如何显示下拉菜单？