ngTagsInput 开源项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00830/article/details/142608666

ngTagsInput 开源项目教程

ngTagsInput Tags input directive for AngularJS 项目地址: https://gitcode.com/gh_mirrors/ng/ngTagsInput

1. 项目介绍

ngTagsInput 是一个为 AngularJS 框架设计的标签输入指令。它允许用户通过输入标签来管理信息，适用于需要用户输入多个关键词或标签的场景。该项目支持自动完成功能，可以帮助用户快速选择和输入标签。

2. 项目快速启动

安装

你可以通过以下几种方式安装 ngTagsInput：

直接下载: 从 GitHub Releases 页面下载最新版本。
NPM: 使用 npm install ng-tags-input --save 命令安装。
Bower: 使用 bower install ng-tags-input --save 命令安装。
CDN: 使用 CDNJS 提供的链接。

引入文件

在你的 AngularJS 应用中引入 ngTagsInput 的相关文件：

<script src="angular.js"></script>
<script src="ng-tags-input.js"></script>
<link rel="stylesheet" type="text/css" href="ng-tags-input.css">

使用

添加模块依赖: 在你的 AngularJS 应用中添加 ngTagsInput 模块作为依赖。
```
angular.module('myApp', ['ngTagsInput']);
```

定义控制器: 在控制器中定义标签数据和自动完成函数。

angular.module('myApp').controller('MyCtrl', function($scope, $http) {
    $scope.tags = [
        { text: 'just' },
        { text: 'some' },
        { text: 'cool' },
        { text: 'tags' }
    ];

    $scope.loadTags = function(query) {
        return $http.get('/tags?query=' + query);
    };
});

HTML 模板: 在 HTML 文件中使用 <tags-input> 指令，并绑定到控制器中的数据。

<body ng-app="myApp" ng-controller="MyCtrl">
    <tags-input ng-model="tags">
        <auto-complete source="loadTags($query)"></auto-complete>
    </tags-input>
</body>