javascript - Angular JS : Show get Json by value

Question

我有一个下拉列表可以更改值的 ID。该值对应于 JSON 对象。

我在使用 ID“搜索”或“过滤”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>

然后您可以创建一个过滤器，根据 ID 获取此值。但这不是您想要的，因为您没有使用 ng-repeat。您只想从集合中获取一个值。我建议您在 Controller 中创建一个函数来为您完成这项工作:

$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

编辑:也许我错了，如果你想显示的不仅仅是名称，最好避免在 Controller 上进行多次迭代。使用过滤器，您可以将其限制为一次迭代。您的过滤器应该返回一个只有一个结果的新集合:

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