Question

我有这样的json

[
  { 
    "id":1,
    "name": "BMW E46 PANDEM",
    "price": 130000,
    "curency":"USD",
    "color":"white",
    "category":"car"
  },
  { 
    "id":2,
    "name": "Yamaha",
    "price": 2000,
    "curency":"USD",
    "color":"white",
    "category":"Bike",
  },
  { 
    "id":3,
    "name": "Nissan GTR R34",
    "price": 130000,
    "curency":"USD",
    "color":"black",
    "category":"car"
  }
]

像这样的工厂

angular
    .module('app')
    .factory('ItemFactory', ['$http', function($http)
        {
            return {
               get: function() {
                return $http.get('scripts/item.json').then(function(response) {
                    return response.data;
                });
               }
            };
        }
    ]);

控制器

angular
    .module('app')
    .controller('apparelCtrl',['$scope','ItemFactory', function($scope,ItemFactory){
            $scope.title='car';
            ItemFactory.get().then(function(data) {
                $scope.apparelItems = data;
            });
            $scope.apparelItems=ItemFactory.get();
            console.log($scope.apparelItems);
        }]);

directive.js

angular
    .module('app.directives.gridViewApparel',[])
    .directive('gridApparel',function()
    {
        return{
            restrict:'E',
            scope:{
                data: '='
            },
            transclude:true,
            replace:true,
            templateUrl:"templates/directives/gridViewApparel.html",
            controller:function($scope){
                console.log($scope.data);
            }
        };
    }
);

diirective.html

<div>
    <div class="col-sm-4 ApparelThumbnail">
        <p class="title">{{data.name}}</p>
        <p>{{data.price}}{{curency}}</p>
        <a href="#/Apparel/{{data.id}}" class="btn btn-primary">detail</a>
    </div>
</div>

我的car.html

<div class="container">
    <h1>{{title}}</h1>
    <div ng-repeat="carlItem in carItems | filter: {category:'car'}" class="">
        <grid-view-apparel data="carlItem"></grid-view-apparel>
    </div>  
</div>

我的car.html和bike.html都出错了

angular.js:14525 Error: [filter:notarray]

我尝试在过滤器之前按索引添加跟踪但仍然出现相同的错误。如何根据类别人从json获取对象？谢谢

Answer 1

以下代码没有任何意义。

ItemFactory.get().then(function(data) {
    $scope.apparelItems = data;
});
$scope.apparelItems=ItemFactory.get();

从您的代码中删除$scope.apparelItems=ItemFactory.get();，因为您从之前覆盖$scope.apparelItems = data;，因此$scope.apparelItems等于承诺，而不是该承诺的结果。

Answer 2

你的回归是个问题。分析你的返回是repnse.data还是承诺。了解$ http响应。 Processing $http response in service

Answer 3

感谢Phil，

他的代码解决了这个问题，

他建议我删除$scope.apparelItems=ItemFactory.get();，现在删除

根据类别获取json对象

3 个答案: