在 ng-repeat 上更改一次迭代

Question

我有一个 ng-repeat 循环遍历我模型中的国家名称。在某些国家/地区名称上，我希望将它们缩写以减少字符串的长度，例如，我希望 'Northern Ireland' 输出为 'N. Ireland'。

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>

Answer 1

您可以创建自己的过滤器 abbreviate 并将其应用于名称。在此过滤器中，您可以打开国家名称和 return 缩写格式。

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

    return function(country) {

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

        return country;

    }

});

Answer 2

对于简单的截断，您可以使用 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>

Answer 3

正如其他人所说，编写您自己的过滤器。

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

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

    }

});

示例：

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

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

请注意，根据您的要求，自定义过滤器可以修改，如果您要处理的单词超过 2 个，我们也可以使用 for 循环。

Answer 5

使用angular

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

然后您将所有国家/地区名称作为键，然后您将使用翻译过滤器

{{nation.name | translate }}

并且您可以添加例如英语： en.json :

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

Answer 6

你可以试试这个。很简单。

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

在 ng-repeat 上更改一次迭代

Change one single iteration on an ng-repeat

javascript

arrays

filter

angularjs

ng-repeat

JSON 型号

HTML