在ng-repeat上更改一次迭代

时间:2016-04-06 13:09:55

标签: javascript arrays angularjs filter ng-repeat

我有一个ng-repeat,它遍历模型中国家/地区的名称。在某些国家/地区名称上,我希望缩写它们以缩短字符串的长度,例如,我想要北爱尔兰'输出为' N.爱尔兰&#39 ;.

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>

6 个答案:

答案 0 :(得分:6)

您可以创建自己应用于名称的过滤器abbreviate。在此过滤器中,您可以打开国家/地区名称并返回缩写格式。

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

    return function(country) {

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

        return country;

    }

});

答案 1 :(得分:3)

像其他人说的那样,写下你自己的过滤器。

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

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

答案 3 :(得分:2)

您可以创建自定义过滤器来实现此目的,如下所示:

在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循环。

答案 4 :(得分:2)

使用角度

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

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

{{nation.name | translate }}

您可以添加例如英语语言: en.json:

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

答案 5 :(得分:1)

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