Угловой простой фильтр страны

0

Скажем, у вас есть

$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 }}

или есть более простой способ, которым я упускаю из виду?

Теги:
object
filter

2 ответа

0
Лучший ответ

Вы можете поместить свои данные на завод и использовать собственный фильтр.

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

См. Эту скрипту: фильтрация ваших стран

  • 0
    Это выглядит Гуна, попробуйте! Не могли бы вы отредактировать передачу в странах в качестве вариабельной области видимости для фильтра, а не с завода?
  • 0
    ты имел ввиду это? jsfiddle.net/tmpesLt6/5
0

Я думаю, что есть два способа сделать это. Сначала используется фильтр, как вы упоминаете. Во-вторых, создайте массив поиска из массива стран и получите имя страны из этого массива по 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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню