Угловой JS: Показать get Json по значению

Question

У меня есть drop down, который изменяет идентификатор значения. Значение соответствует объекту JSON.

У меня возникли проблемы с «поиском» или «фильтром» имени (свойства) объектов JSON с помощью идентификатора.

Код для отображения текущей станции

<a class="navbar-brand" href="#">{{ stations.name | station_id:2 }}</a> 

Текущие станции

$scope.currentStation = 1; 
//Fake data 
$scope.stations = 
[ 
    {'name':'Station1', 'station_id':1,'featured_album':'1 Featured Album'}, 
    {'name':'Station2', 'station_id':2,'featured_album':'2 Featured Album'}, 
    {'name':'Station3', 'station_id':3,'featured_album':'3 Featured Album'} 
]; 

Answer 1

Прежде всего фильтр используется для фильтрации коллекции и возвращает измененную коллекцию.

<div ng-repeat="station in stations | getById('2')"> 
    <a class="navbar-brand" href="#">{{ stations.name }}</a> 
</div> 

Затем вы можете создать фильтр, который получит это значение на основе идентификатора. Но это не то, что вы хотите, так как вы не используете ng-repeat. Вы просто хотите получить одно значение из своей коллекции. Я предлагаю вам создать функцию в контроллере, который делает эту работу за вас:

$scope.getStationById = function(id) { 
    var parsedId = +id, 
     foundStation; 

    angular.forEach($scope.stations, function(station) { 
     if(station.station_id === parsedId) { 
      foundStation = station; 
     } 
    }); 

    return foundStation; 
}; 

jsFiddle

или вы можете использовать переменную currentstation Область применения:

jsFiddle - update

Edit: Возможно, я ошибаюсь, если вы хотите показать больше, чем просто имя, это хороший совет, чтобы избежать нескольких итераций на контроллере. С помощью фильтра вы можете ограничить это на одну итерацию. Ваш фильтр должен вернуть новую коллекцию только один результат:

app.filter('getById', function() { 
     return function(coll, id) { 
      var parsedId = +id, 
       foundStation; 

      angular.forEach(coll, function(station) { 
       if(station.station_id === parsedId) { 
        foundStation = station; 
       } 
      }); 

      // Create array if station found otherwise return empty array 
      return foundStation ? [foundStation] : [];   
     }; 
    }); 

JsFiddle