如何使用 Angular UI Bootstrap 制作标签？

Angular UI Bootstrap 是一个使用 AngularJS 和 Bootstrap 3 CSS 框架的 UI 库。它提供了很多常用的 UI 组件，其中包括标签（tag）组件。本文将介绍如何使用 Angular UI Bootstrap 制作标签。

安装 Angular UI Bootstrap

要使用 Angular UI Bootstrap，首先需要将其安装到项目中。可以通过以下命令使用 npm 安装：

npm install angular-ui-bootstrap 

然后将库文件添加到 AngularJS 应用程序中：

angular.module('myApp', ['ui.bootstrap']);

使用标签组件

使用 Angular UI Bootstrap 制作标签非常简单。首先，在 HTML 中创建一个标签输入框：

<input type="text" class="form-control" ng-model="selectedTags" 
placeholder="Type to search tags..." uib-typeahead="tag for tag in tags | filter:$viewValue | limitTo:8" 
typeahead-min-length="1" typeahead-editable="false" typeahead-on-select="selectTag($item)">

然后，在 Angular 控制器中定义一个包含可用标签的数组：

$scope.tags = [
  'AngularJS', 'React', 'Vue.js', 'Ember', 'Backbone',
  'Express', 'Meteor', 'Django', 'Flask', 'Rails',
  'MySQL', 'PostgreSQL', 'MongoDB', 'Redis', 'SQLite'
];

这将创建一个具有自动完成功能的输入框，当用户在输入框中键入时，它将显示与已定义的标签匹配的选项。此外，当用户选择一个标签时，它将被添加到 selectedTags 变量中。下面是 selectTag 方法的代码：

$scope.selectedTags = [];

$scope.selectTag = function(tag) {
  if ($scope.selectedTags.indexOf(tag) == -1) {
    $scope.selectedTags.push(tag);
  }
};

显示标签

现在可以在页面上显示已选择的标签了。这可以通过迭代 selectedTags 数组并在 HTML 中使用 ng-repeat 指令来完成：

<span class="label label-primary" ng-repeat="tag in selectedTags">{{ tag }}</span>

这会创建一个包含所有已选择标签的 span 元素。

完整代码片段：

<input type="text" class="form-control" ng-model="selectedTags" 
placeholder="Type to search tags..." uib-typeahead="tag for tag in tags | filter:$viewValue | limitTo:8" 
typeahead-min-length="1" typeahead-editable="false" typeahead-on-select="selectTag($item)">

<span class="label label-primary" ng-repeat="tag in selectedTags">{{ tag }}</span>

angular.module('myApp', ['ui.bootstrap']);

$scope.tags = [
  'AngularJS', 'React', 'Vue.js', 'Ember', 'Backbone',
  'Express', 'Meteor', 'Django', 'Flask', 'Rails',
  'MySQL', 'PostgreSQL', 'MongoDB', 'Redis', 'SQLite'
];

$scope.selectedTags = [];

$scope.selectTag = function(tag) {
  if ($scope.selectedTags.indexOf(tag) == -1) {
    $scope.selectedTags.push(tag);
  }
};

以上是如何使用 Angular UI Bootstrap 制作标签的示例。作者希望这篇文章可以对程序员有所帮助。