加角样式

Question

我的html中有以下代码：

<p>Tags: {{source.tags}}</p>

这是呈现的html：

mq-server queue republish purge

此值来自中的一个字段：

'tags': 'mq-server queue republish purge'

我想要的是在每个用空格分隔的单词中添加样式，用更好的词--比如标记--我喜欢引导中的层次信息类，有谁知道如何实现呢？

Answer 1

您可以将字符串拆分成单独的单词，并使用ng-重复在span中用标签类显示字符串。

<span class="label label-default" ng-repeat="tag in source.tags.split(' ')">{{tag}}</span>

Answer 2

在控制器中，可以将标记拆分到数组中，然后使用ng-重复循环遍历数组，并将标签标记应用于每个数组。

拆分数组：

$scope.source.tagsArray = $scope.source.tags.split(" ");

模板中的打印标记

<p>Tags: 
    <span ng-repeat="tag in source.tagsArray" class="label label-info">
        {{tag}}
    </span>
</p>