为Angular 1.6芯片自动完成。没有角材料

我需要在我们的Angular 1.6应用程序中添加自动完成芯片组件。我们正在使用Typescript，Webpack 2。由于我们已经在使用angular-ui-bootstrap，我们不想引入角度材料以避免样式冲突。然而，希望的结果正是材料芯片提供的。为Angular 1.6芯片自动完成。没有角材料

是否有我可以用于我的情况的指令或组件？我找到了this library，但是当我导入它时，它会运行无尽的例外。

不幸的是，我只能找到部分解决方案与引导头型，但我需要实现所有的“芯片”部分，使我想到重新发明车轮。

来源

2017-04-04 Francesco

Stack Newb here。我有和你一样的问题。以下是我解决了这个：

1.解决ReferenceError: error is not defined角芯片库

你使用（角芯片）的库设计时没有考虑到打字稿内。因此，您首先需要通过在var error;之上的行中为它们定义它来解决以下错误ReferenceError: error is not defined。这应该为您的webpack使用准备角码芯片。

第二个问题，你会发现是如何添加您的typeahead-template-url webpack的混合。而不是引用单独的html文件，请使用此处引用的内联模板：Bootstrap-UI Typeahead display more than one property in results list?。

如果你是懒惰和我一样，不想遵循超链接，以此作为例子：

2.模板的<chips>标记之前添加：

<script type="text/ng-template" id="yourTemplate.html"> 
    <a tabindex="-1"> 
     <i ng-class="'icon-'+match.model.type"></i> 
     <span ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span> 
    </a> 
</scrip>

3.包括在你的指令模板：

typeahead-template-url:"yourTemplate.html"

工作就像对我来说是一种魅力。

来源

2017-05-09 17:42:27 DelGuapo

我能够通过使用另一个库来解决问题：ngTagsInput（http://mbenford.github.io/ngTagsInput/），它没有任何问题和解决方法。 – Francesco

为Angular 1.6芯片自动完成。没有角材料

回答

相关问题