Question

说你有

$scope.countries = [
{ id="7AFG",  name="Afghanistan"}, 
{ id="1B1",  name="Albania"},
{ id="4AL",  name="Algeria"},
{ id="1B2",  name="Andorra"}
]

依此类推，并且在您的视图中，您正在显示的产品的countryID与上面显示的ID相对应。例如

{{ product.address.countryID}}

将是＆＃34; 1B1＆＃34;或者其他一些。从列表中获取国家/地区名称值的最有效方法是显示而不是ID？

我是否需要编写自定义过滤器然后应用它，例如

{{product.address.countryID | myCountryFilter }}

还是有一种我更容易忽视的方式？

Answer 1

我认为有两种方法可以做到这一点。首先是你提到使用过滤器。第二个是从countries数组创建查找数组，并通过id从此数组中获取国家/地区名称。

$scope.lookup = {};
angular.forEach($scope.countries, function(country){
    $scope.lookup[country.id] = country;
});

然后在你的html文件中：

{{lookup[product.address.countryID].name}}

我为此http://codepen.io/anon/pen/avQjYw

创建了codepen

Answer 2

您可以将数据放入工厂并使用自定义过滤器。

angular.module('myApp',[])
.factory('countriesFactory', function()
{
    var data = [
        { id:"7AFG",  name:"Afghanistan"}, 
        { id:"1B1",  name:"Albania"},
        { id:"4AL",  name:"Algeria"},
        { id:"1B2",  name:"Andorra"}
    ];

    return data;
})
.filter('countryFilterById', function($filter, countriesFactory)
{
    return function(id, keyStrToReturn)
    {
        var filtered = $filter('filter')(countriesFactory, {'id':id})

        if(filtered.length < 1){ return null; }
        if(keyStrToReturn){ return filtered[0][keyStrToReturn]; }

        return filtered[0];
    }
})
.controller('MyCtrl', function($scope, countriesFactory)
{
    $scope.currentProductId = '1B1'; // for that demo
});

看到这个小提琴： filtering your countries

角度简单国家过滤器

2 个答案: