angularJS文本标记

angularJS text tags

本文关键字：文本 angularJS      更新时间：2023-09-26

我想创建一个类似于"标记"的操作系统，它有助于处理包含随机内容的各种标记。我选择了使用角度ui警报机制，所以我把它包装了一下，得到了这样的东西：

工厂：

app.factory(
        'ObjectTag',
        function () {
            function ObjectTag() {
                this.tags = [];
            }
            ObjectTag.prototype = {
                hasTags: function () {
                    return( this.tags.length != 0);
                },
                addTag: function (msgText, objectId) {
                    this.tags.push({type: 'info', msg: msgText, encapsulatedId: objectId});
                },
                closeTag: function(index){
                    this.tags.splice(index, 1);
                },
                getTags: function () {
                    return this.tags;
                }
            };
            return (ObjectTag);
        });

和指令：

app.directive('objectTag', function () {
        return {
            restrict: 'E',
            require: '^objectTags',
            template: "<div ng-if='objectTags.hasTags()'><alert ng-repeat='tag in objectTags.getTags()' type='{{ tag.type }}' close='objectTags.closeTag($index)'>{{ tag.msg }}</alert></div>"
        }
    });

我是这样使用的：

<object-tag object-tags="objectTags"></object-tag>

在我的控制器中也是这样：

$scope.objectTags = new ObjectTag();

我希望能够轻松添加和删除标签。我的问题是，它们看起来不像我希望的那样，我希望每个标签都浮动到另一个标签的右侧，并且其大小刚好足以容纳文本，就像这里的标签一样，相反，每个警报标签都显示在不同的行上。

您可以通过覆盖Bootstrap CSS以多种方式解决此问题。我特别喜欢display: inline-flex风格。下面是一个plnkr示例。你可以在css-tricks.com.的这篇优秀文章中阅读更多关于它的信息

以及相关的HTML/CSS:

<div class="alert alert-success alert-inline" role="alert">Well done!</div>
<div class="alert alert-info alert-inline" role="alert">Heads up!</div>
<div class="alert alert-warning alert-inline" role="alert">Warning!</div>
<div class="alert alert-danger alert-inline" role="alert">Oh snap!</div>
.alert-inline {
  display: inline-flex;
}
相关文章：