1

问题

我正在尝试根据页面的当前 URL 过滤 json 数据并仅在 Angular 页面上显示其中的一部分。

详细地

我有一个包含 100 个 JSON 对象的列表，每个对象看起来像这样：

{
  "name": "Evangeline Perreault",
  "age_1": 1,
  "total_age": 1,
  "photo_small": "img/400/001_400.jpg",
  "photo_medium": "img/800/001_800.jpg",
  "photo_large": "img/1200/001_1200.jpg",
  "photo_extralarge": "img/1600/001_1600.jpg",
  "video": 67443664,
  "id": 1,
  "quote": "test quote here and here",
  "type": 1
},

'type' 属性是我想要用来过滤掉我的数据子集的。考虑到这一点，我尝试设置我的 URL 结构以将此处的 type 属性与我的 url 联系起来。这是我的路线：

angular.module('100_Ages', ['mydirectives', 'ngResponsiveImages']).
    config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/100_Ages/nav/:personType', {templateUrl: 'partials/person-list.html', controller: NavListCtrl}).
        otherwise({redirectTo: '/100_Ages'});
    }]);

所以，我已经将路径指向我的 JSON 中的“类型”字段，并尝试编写一个控制器将两者联系在一起。

function NavListCtrl($scope, $routeParams, $http) {
  $http.get('person.json').success(function(data) {
  angular.forEach(data, function(person) {
          if (person.type == $routeParams.personType) 
            $scope.person = person;
        });
  });
}

这是我的部分模板：

<div class="nav_outer"><img class="nav_img" ng-src="{{person.photo_small}}" ng-alt="{{person.name}}" /></div>

我希望这会显示我所在的 URL 类型的所有匹配图像。因此，如果我在“/100_Ages/nav/3”上，我希望显示类型为“3”的对象的所有图像（大约 10 张图片）。但是，它只显示类型为“3”的最后一个对象。

所以，我尝试了ng-repeat这样的：

<div class="nav_outer" ng-repeat="person in persons"><img class="nav_img" ng-src="{{person.photo_small}}" ng-alt="{{person.name}}" /></div>

我希望循环显示所有匹配的图像，但这根本没有显示出来。

我认为我的问题与 . angular.forEach，但我不确定如何将我的 JSON 类型与页面的 typeid 联系起来。

感谢您的任何建议。

4

1 回答 1

2

ng-repeat如果您将每个项目推入数组，则应该可以工作。（此外，您指的是 ng-repeat 中的“persons”对象，根据提供的代码，该对象不存在）。所以，试试这个：

$http.get('person.json').success(function(data) {
    $scope.persons = [];
    angular.forEach(data, function(person) {
        if (person.type == $routeParams.personType) 
            $scope.persons.push(person);
            // or alternatively - this.push(person), with the optional 3rd param of $scope.persons (I don't really understand that, but whatever...)
    });
});

现在填充了数组，你ng-repeat="person in persons"应该可以工作了。

更新：

如果成功对象已经是一个对象数组，那么只需将范围对象设置为数组 - 无需遍历它们：

$http.get('person.json').success(function(data) {
    $scope.persons = data;    
})
于 2013-06-24T00:32:02.883 回答