以角度

Question

我的html中有以下代码：

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

这是渲染的html：

mq-server queue republish purge

此值来自我的对象中的字段：

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

我想要的是为每个用空格词分隔的样式添加样式，更好的话就像标签一样，我喜欢bootstrap中的level-info类，任何人都知道如何实现它？

Answer 1

您可以将字符串拆分为单独的单词，并使用ng-repeat在带有标签类的范围内显示它们

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

Answer 2

在您的控制器中，可以将标签拆分为数组，然后使用ng-repeat循环遍历数组，将标签标签应用于每个数组。

拆分阵列：

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

在模板中打印标签

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