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」属性は、データのサブセットを除外するために使用したいものです。それを念頭に置いて、ここで type 属性を自分の URL に結び付けるように 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 の「type」フィールドへのルートを指定し、この 2 つを結び付けるコントローラーを作成してみました。

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.

提案をありがとう。

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 に答える