Как обработать массив (или вручную обработать 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>

Я вижу, что здесь происходит ... ng-repeat вызывает итерацию для элементов model.externalProviders collection / array.Это работает нормально, но я не могу контролировать содержимое / стилизацию отдельных элементов <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 соответствовал классному селектору icon icon для значка.Это работает:

        <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>

Недостатки: не позволяет изменить фактическую разметку (например, не включать значок, если у шрифта awesome его нет для этого поставщика).