Измените одну итерацию на ng-repeat

У меня есть ng-repeat, который повторяется через имена стран в моей модели. В некоторых названиях стран я хочу, чтобы они сокращали длину строки, например, я хочу, чтобы "Северная Ирландия" выводилась как "N. Ирландия'.

Модель JSON

[
  {
    "id": 1,
    "name": "Italy",
  },

  {
    "id": 2,
    "name": "Northern Ireland",
  },

  {
    "id": 3,
    "name": "Poland",
  }
]

Я мог бы просто изменить имя в моей модели, но я предпочел бы оставить это, поскольку я хочу, чтобы исходные данные были полными. Только в этом конкретном экземпляре я хочу, чтобы он был сокращен.

Должен ли я использовать фильтр ng-repeat? Если да, то как? Если нет, любые другие предложения?

HTML

<md-grid-tile ng-repeat="nation in nationData">

  <img src="img/{{nation.name}}.png">

  <md-grid-tile-footer>
    <h3>{{nation.name | uppercase}}</h3>
  </md-grid-tile-footer>

</md-grid-tile>

Ответ 1

Вы можете создать свой собственный фильтр abbreviate, который применяется к имени. В этом фильтре вы можете включить название страны и вернуть сокращенный формат.

app.filter('abbreviate', function() {

    return function(country) {

        switch(country){
            case "Northern Ireland":
                country = "N. Ireland"
                break;
        }

        return country;

    }

});

Ответ 2

Как и другие, напишите свой собственный фильтр.

app.filter('abbreviate', function() {

    return function(country) {
        return country.replace(/^(\S)\S*(\s+\S+)/m, "$1.$2");

    }

});

Пример:

alert("Northern Ireland".replace(/^(\S)\S*(\s+\S+)/m, "$1.$2"));
alert("South Africa".replace(/^(\S)\S*(\s+\S+)/m, "$1.$2"));
alert("USA".replace(/^(\S)\S*(\s+\S+)/m, "$1.$2"));

Ответ 3

Вы можете попробовать это. Это просто.

<md-grid-tile ng-repeat="nation in nationData">

  <img src="img/{{nation.name}}.png">

  <md-grid-tile-footer>
    <H3 ng-if="nation.name.split(' ').length > 1">{{ nation.name | limitTo:1 | uppercase }}. {{ nation.name.split(' ')[1] }}</H3>
    <H3 ng-if="nation.name.split(' ').length == 1">{{ nation.name }}</H3>
  </md-grid-tile-footer>

</md-grid-tile>

Ответ 4

Для этого вы можете создать собственный фильтр, как показано ниже:

В HTML сделайте следующее:

<h3>{{nation.name | myFormat}}</h3>

В вашем js определите этот файл, как показано ниже:

app.filter('myFormat', function() {
    return function(x) {
        x = x.split(" ");
        if(x.length>1){
            x = x[0].split("")[0] + ". " + x[1];
            return x;
        }
        else
            return x[0];
    };
});

Пожалуйста, не следует, что в соответствии с вашим запросом пользовательский фильтр может быть изменен, и мы можем использовать его для циклов, если вам нужно обрабатывать более двух слов.

Ответ 5

использовать angular

https://angular-translate.github.io/

тогда вы поместите все названия своей страны в качестве ключей, и вы будете использовать фильтр трансляции

{{nation.name | translate }}

и вы можете добавить, например, для английского языка: ru.json:

[
  {
    "Italy": "Italy",
    "Northern Ireland": "N.Ireland",
    "Poland": "Poland",
.....
  }
]

Ответ 6

Для простого усечения вы можете использовать фильтр limitTo, и имеет смысл сохранить модель неизменной.

Вот простой пример (8 символов):

<md-grid-tile ng-repeat="nation in nationData">
  <img src="img/{{nation.name}}.png">

  <md-grid-tile-footer>
    <h3>{{nation.name | limitTo: 8 | uppercase}}</h3>
  </md-grid-tile-footer>

</md-grid-tile>