Question

在我的JSON结构中有countryIds字段：

[
    {countryIds: [1, 35, 16]}
    {countryIds: [6, 21]}
]

在UI中我想显示国家/地区标志而不是国家/地区ID。

所以，为此我想我可以创建服务，它将返回图标标记的URL：

getCountryFlagIconUrlById(countryId) {
  switch(countryId) {
    case 1: return "http://mySite:8080/resources/usa.png"
    .....
    case 200: return "http://mySite:8080/resources/russia.png"
  }

但问题是我需要为200多个国家/地区创建switch-case运营商。

还有更优雅的方式吗？

Answer 1

只需使用地图

var countries = { 
   1: 'usa',
   ...,
   200: 'russia'
};

使用getCountryFlagIconUrlById，如下所示：

function getCountryFlagIconUrlById(id) {
  return 'http://localhost:8080/resources/'+countries[id]+'.png';

}

目前的缺点是它不会检查id是否存在，但这是一个简单的if语句。

Answer 2

对于更有棱角的方法，将您的国家/地区存储为.factory中的JSON地图，其中包含ID和png的名称值对。

然后创建一个自定义.filter，根据用作输入的id映射值。 Filter Documentation

<强> Working Fiddle

app.factory('FlagFactory', function() {
     return {
        1: "usa",
        2: "russia",
        ...
        ...
     };
});

app.filter('flag', ['FlagFactory', function(FlagFactory) {
  return function(input) {
     return "http://mySite:8080/resources/" + FlagFactory[input] + ".png";
  };
});

这将很容易在整个应用中实现和重复使用。

<html> Hello World {{someCountryID | flag}}  </html>

附加说明：

如果您打算使用计划使用角度模型来更新图像标记的src，则应使用ng-src否则网站将尝试使用文字哈希{{someimage}}来获取图像角度替换它。

<img ng-src="{{foo | flag}}" alt="flag" />

Answer 3

如果您的countryIds是唯一的[它们应该是，您可以相应地重命名图像并重新设计代码

getCountryFlagIconUrlById(countryId) {
    return "http://mySite:8080/resources/" + countryId + ".png"
}

如果您的json结构允许，另一种方法是，用户国家ID可以获取国家/地区名称并相应地获取图像。

也就是说，如果你有

{1：“country1”，2：“country2”}

您可以像这样修改方法

getCountryFlagIconUrlById(countryId) {
    return "http://mySite:8080/resources/" + countryJSON[countryId] + ".png"
}

Angular JS。在UI中显示国家标志，而我只有国家的ID

3 个答案: