以角度添加样式答案

【问题标题】：Adding style in angular以角度添加样式
【发布时间】：2016-08-27 21:37:39
【问题描述】：

我的 html 中有以下代码：

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

这是渲染的 html：

mq-server queue republish purge

这个值来自我的对象中的一个字段：

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

我想要的是为每个用空格词分隔的样式添加样式，用更好的词比如标签，我喜欢引导程序中的level-info 类，有人知道如何实现吗？

【问题讨论】：

【解决方案1】：

在您的控制器中可以将标签拆分为一个数组，然后使用 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>

【讨论】：

【解决方案2】：

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

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

【讨论】：