如何处理数组(或手动处理ng repeat)

Question

使用：AngularJS v1.3.15

免责声明：我对angularjs几乎一无所知。但我"被迫"使用它，因为它是在我使用的框架中使用的。

我想修改一些html/angularjs，看起来像这样：

<ul>
<li ng-repeat="provider in model.externalProviders">
<a class="pure-button" href="{{provider.href}}">{{provider.text}}</a>
</li>
</ul>

我能看到这里发生了什么。。。CCD_ 1引起对CCD_ 2集合/数组的元素的迭代。它工作得很好，但我无法根据提供者控制内容/设置单个<a>元素的样式。我想根据类型更改<a>元素的内容/外观。

模型的相关部分如下所示：

"externalProviders": [
{
"type": "Google",
"text": "Sign-in with Google",
"href": "https://localhost:44302/external?provider=Google&signin=04e029cf1018403f1757b097fbfb1ecb"
}
],

所以我想也许有一种方法可以按类型从externalProviders中"选择"或"挑选"。。。如果存在该类型，则呈现适当的标记，例如：

<ul>
<!-- if model.externalProviders has item with type=="Google"... -->
<li>
<a class="pure-button button.google" href="<i class="fab fa-google"></i>{{provider.href}}">{{provider.text}}</a>
</li>
<!-- if model.externalProviders has item with type=="Facebook"... -->
<li>
<a class="pure-button button.facebook" href="<i class="fab fa-facebook"></i>{{provider.href}}">{{provider.text}}</a>
</li>
</ul>

不确定合适的搜索词是什么，所以我很难找到任何可能解决我问题的信息。AngularJS有可能出现这种情况吗？如果是这样，我将如何完成它？

Answer 1

正如@Major Sam所评论的，ngClass可能适用于不那么简单的场景，但我甚至不需要走那么远。幸运的是，我可以控制type属性和css，所以我可以使我的type和css选择器与图标的字体很棒的图标类选择器相匹配。这项工作：

<li ng-repeat="provider in model.externalProviders">
<a class="pure-button button-{{provider.type}}" href="{{provider.href}}"><i class="fab fa-{{provider.type}}"></i>{{provider.text}}</a>
</li>

缺点：不允许更改实际标记(例如，如果字体真棒没有图标，则不包括图标)。