当我使用过滤器时如何迭代我的矩阵

时间:2016-03-27 01:46:39

标签: javascript angularjs

大家好,我正在使用ArgularJs。我需要解决这个问题,当我使用过滤器时,我无法迭代我的矩阵以将其值显示在我的表中。

<div ng-app="app" ng-controller="ctrl">
    <select ng-model="selectedCity" ng-options="x as (x | cityFilter) for (x, y) in cities">
    </select>
</div>

<table>
    <tr ng-repeat="item in selectedCity">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
    </tr>
</table>

这是我的脚本js:

angular.module('app', [])
.filter('cityFilter', function() {
    return function(city) {
        return city.replace('_', ' ');
    }
})
.controller('ctrl', function($scope) {
    $scope.cities = {
        city: [{
            id: 'c01',
            name: 'name1',
            price: 15
        }, {
            id: 'c02',
            name: 'name2',
            price: 18
        }, {
            id: 'c03',
            name: 'name3',
            price: 11
        }],
        city_02: [{
            id: 'cc01',
            name: 'name11',
            price: 10
        }, {
            id: 'cc02',
            name: 'name22',
            price: 14
        }, {
            id: 'cc03',
            name: 'name33',
            price: 11
        }],
        city_03: [{
            id: 'ccc01',
            name: 'name111',
            price: 19
        }, {
            id: 'ccc02',
            name: 'name222',
            price: 18
        }, {
            id: 'ccc03',
            name: 'name333',
            price: 10
        }]
    };

    $scope.selectedCity = 'city_02';
});

当我跑步时,我收到此错误:

Error: ngRepeat:dupes
Duplicate Key in Repeater
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in selectedCity, Duplicate key: string:a, Duplicate value: a

我想在我的选择中将城市02显示为默认选择。

感谢您的帮助

1 个答案:

答案 0 :(得分:1)

charlietfl指出$scope.selectedCity是一个字符串,不能与ng-repeat一起使用,你需要给它一个数组。

我认为你要做的是:

<tr ng-repeat="item in cities[selectedCity]">

更新了jsfiddle:https://jsfiddle.net/bgg5yfot/1/