改变一个NG重复单一的迭代 [英] Change one single iteration on an ng-repeat

问题描述

我有一个NG重复，通过国家的在我的模型的名称进行迭代。在某些国家的名字，我希望他们略减少字符串的长度，例如，我想北爱尔兰被输出为'N.爱尔兰'。

JSON模型

  [
  {
    标识：1，
    名：意大利，
  }，  {
    ID：2，
    名：北爱尔兰
  }，  {
    ID：3，
    名：波兰，
  }
]
 

我可以在我的模型更改名称，但我宁愿离开那个，因为它是因为我想要的原始数据是完整的。我想拥有它缩写只有在这个特定的实例。

我应该使用 NG-重复过滤？如果是这样，怎么样？结果
如果没有，任何其他建议？

HTML

 ＆LT; MD-网格瓦NG重复=民族的nationData＆GT;  ＆所述; IMG SRC =IMG / {{nation.name}} PNG＆GT;  ＆LT; MD-网格瓦尺＆GT;
    ＆LT; H3＆GT; {{nation.name |大写}}＆LT; / H3 GT＆;
  ＆LT; / MD-网格瓦尺＆GT;＆LT; / MD-格砖＆GT;
 

解决方案

您可以创建自己的过滤器缩写应用到的名称。在此过滤器，你可以打开这个国家的名字，并返回缩写格式。

  app.filter（'简称'，函数（）{    复位功能（国家）{        开关（国家）{
            案北爱尔兰：
                国家=北爱尔兰
                打破;
        }        返回的国家;    }}）;
 

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>

解决方案

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;

    }

});

这篇关于改变一个NG重复单一的迭代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！