Скажем, у вас есть
$scope.countries = [
{ id="7AFG", name="Afghanistan"},
{ id="1B1", name="Albania"},
{ id="4AL", name="Algeria"},
{ id="1B2", name="Andorra"}
]
и т.д., и, на ваш взгляд, вы показываете продукт с идентификатором страны, который соответствует идентификаторам, показанным выше. Например
{{ product.address.countryID}}
который будет "1B1" или некоторые такие. Каков наиболее эффективный способ присвоить значение имени страны из списка, а не идентификатор?
Мне нужно написать собственный фильтр, а затем применить его, например,
{{product.address.countryID | myCountryFilter }}
или есть более простой способ, которым я упускаю из виду?
Вы можете поместить свои данные на завод и использовать собственный фильтр.
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
});
См. Эту скрипту: фильтрация ваших стран
Я думаю, что есть два способа сделать это. Сначала используется фильтр, как вы упоминаете. Во-вторых, создайте массив поиска из массива стран и получите имя страны из этого массива по id.
$scope.lookup = {};
angular.forEach($scope.countries, function(country){
$scope.lookup[country.id] = country;
});
И затем в вашем html файле:
{{lookup[product.address.countryID].name}}
Я создаю codepen для этого http://codepen.io/anon/pen/avQjYw