简介
simple-ng-tags 是一个轻量级的Angularjs组件，用于标记化输入框。该组件允许用户选择或输入标签，并将它们放在一个类似于标签云的界面上。
simple-ng-tags 提供了多种选项，如用于自定义样式、禁用标签输入和输入最大字符数等。
安装
npm 安装 simple-ng-tags：
npm install simple-ng-tags --save
引入
将simple-ng-tags插件引入你的Angularjs应用程序中：
<script src="path/to/angular.min.js"></script> <script src="path/to/simple-ng-tags.min.js"></script>
确保在<script>标签里按如下格式添加 HTML 文件的 templateUrl：</p> <pre class="prettyprint login js">templateUrl: 'path/to/simple-ng-tags.html'</pre><p>在应用程序中依赖simple-ng-tags：</p> <pre class="prettyprint login js">angular.module('myApp', ['simple-ng-tags']);</pre><h2>使用</h2> <p>在应用程序中添加 simple-ng-tags 标记：</p> <pre class="prettyprint login html"><simple-ng-tags tags="tags" delimiter="," placeholder="add tags"></simple-ng-tags></pre><p>这个标记将一个标记化输入框添加到页面上。在这个例子中，tags 属性绑定到一个名为 tags 的变量，delimiter 属性设置输入框中的分隔符，placeholder 属性设置 placeholder 文本。</p> <h2>参数</h2> <p>simple-ng-tags 可以使用一系列属性来自定义用户体验。</p> <table> <thead> <tr> <th>属性</th> <th>描述</th> <th>类型</th> <th>默认值</th> </tr> </thead> <tbody><tr> <td>tags</td> <td>输入的标签数组</td> <td>Array</td> <td>[]</td> </tr> <tr> <td>delimiter</td> <td>分隔符</td> <td>String</td> <td>','</td> </tr> <tr> <td>placeholder</td> <td>placeholder文本</td> <td>String</td> <td>''</td> </tr> <tr> <td>add-on-blur</td> <td>自动添加标记</td> <td>Boolean</td> <td>false</td> </tr> <tr> <td>add-on-comma</td> <td>在逗号上添加标记</td> <td>Boolean</td> <td>true</td> </tr> <tr> <td>add-on-enter</td> <td>回车添加标记</td> <td>Boolean</td> <td>true</td> </tr> <tr> <td>add-on-space</td> <td>空格添加标记</td> <td>Boolean</td> <td>false</td> </tr> <tr> <td>max-input-length</td> <td>最大输入字符个数</td> <td>Number</td> <td>Infinity</td> </tr> <tr> <td>is-readonly</td> <td>只读模式</td> <td>Boolean</td> <td>false</td> </tr> <tr> <td>show-remove</td> <td>显示标记删除按钮</td> <td>Boolean</td> <td>true</td> </tr> <tr> <td>remove-btn-text</td> <td>删除按钮文本</td> <td>String</td> <td>'X'</td> </tr> <tr> <td>on-add</td> <td>添加标记的回调函数</td> <td>Function</td> <td>null</td> </tr> <tr> <td>on-remove</td> <td>删除标记的回调函数</td> <td>Function</td> <td>null</td> </tr> </tbody></table> <h2>例子</h2> <p>这个例子展示了如何使用 simple-ng-tags 组件来选择或输入标签。</p> <pre class="prettyprint login html"> <simple-ng-tags tags="tags" delimiter="," placeholder="add tags" add-on-blur="true" add-on-enter="true"></simple-ng-tags> <div ng-repeat="tag in tags track by $index" style="display: inline-block; margin: 5px;"> <span>{{tag}}</span> </div></pre><p>这里的 tags 变量是一个数组，将会存储用户输入的标记。</p> <h2>结论</h2> <p>simple-ng-tags 是一个小而强大的工具，可以帮助你更好的处理标签输入。如果你需要一个简单而可定制的输入框来管理标签，那么 simple-ng-tags 是一个不错的选择。</p> <p>同时，它也可以帮助 Angularjs 新手更好的理解组件和绑定的工作方式。通过添加自己的参数和回调函数模式，你可以学习如何修改和利用已有的组件。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/600560c181e8991b448df0b8">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/600560c181e8991b448df0b8">https://www.javascriptcn.com/post/600560c181e8991b448df0b8</a></p> </blockquote>