Question

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

我遇到问题＆＃34;搜索＆＃34;或＆＃34;过滤＆＃34;使用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。您只想从集合中获取单个值。我建议你在控制器中创建一个为你完成这项工作的功能：

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

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

    return foundStation;
};

jsFiddle

或者您可以使用当前站范围变量：

jsFiddle - update

编辑：也许我错了，如果您想要展示的不仅仅是名称，那么避免在控制器上进行多次迭代是个不错的建议。使用过滤器，您可以将此限制为一次迭代。您的过滤器应该只返回一个只有一个结果的新集合：

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

Angular JS：按值显示获取Json

1 个答案: