爲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芯片自動完成。沒有角材料

回答

相關問題