时间戳

首页 > 解决方案 > 如何处理数组（或手动处理 ng-repeat）？

angularjs - 如何处理数组（或手动处理 ng-repeat）？

问题描述

使用：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>

我可以看到这里发生了什么...... ng-repeat导致对model.externalProviders集合/数组的元素进行迭代。<a>它工作正常，但我无法根据提供者控制内容/样式化单个元素。我想<a>根据类型更改元素的内容/外观。

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

"externalProviders": [
  {
    "type": "Google",
    "text": "Sign-in with Google",
    "href": "https://localhost:44302/external?provider=Google&amp;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可以做到这样的事情吗？如果是这样，我将如何实现它？

标签： angularjshtml

解决方案

正如@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>

缺点：不允许您更改实际标记（例如，如果 font awesome 没有该提供程序的图标，则不包括图标）。

推荐阅读