Change one single iteration on an ng-repeat

Question

I have an ng-repeat that iterates through the names of countries in my model. On certain country names I want them abbreviated to reduce the length of the string, for example, I want 'Northern Ireland' to be outputted as 'N. Ireland'.

JSON Model

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

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

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

I could just change the name in my model, but I'd rather leave that as it is as the I want the raw data to be complete. It is only in this specific instance I want to have it abbreviated.

Should I use an ng-repeat filter? If so, how?
If not, any other suggestions?

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>

Answer 1

Like other's said, write your own filter.

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

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

    }

});

Example:

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"));

Answer 2

You can try this. It is simple.

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

Answer 3

You could create your own filter abbreviate that is applied to the name. In this filter you could switch on the country name and return the abbreviated format.

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

    return function(country) {

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

        return country;

    }

});

Answer 4

use angular

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

then you put all your country names as keys, and you will use the translate filter

{{nation.name | translate }}

and you can add for example for english language : en.json :

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

Answer 5

You can create a custom filter to achieve this, as shown below:

In HTML do this :

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

In your js, define this filer as below:

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];
    };
});

Please not that as per your req the custom filter can be modified and we can use for loops if you got more than 2 words to be handled as well.

Answer 6

For a simple truncate you can use the limitTo filter and it makes sense to keep the model unchanged.

Here a simple example (8 chars):

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