使用 ng-repeat 从对象的 http 响应数组中检索数据

Question

我正在尝试从 laravel API 中检索响应，在我的控制器中使用 HTTP get 请求并使用 ng-repeat 循环遍历视图中的所有数据，它在控制台中记录所有响应但不在视图中显示任何内容。这是我的 JSON 对象：

[
 {
  "id":1,
  "product_id":"ABCly119",
  "name":"Shirt",
  "category_id":"fashion",
  "color":"Grey",
  "size":"L",
  "brand":"Tims",
  "type":"Polo",
  "price":11000,
  "main_image":null,
  "vat":null,
  "description":"A very good shirt",
  "product_condition":"new",
  "created_at":"2017-07-31 14:36:17",
  "updated_at":"2017-07-31 15:37:21"},
{
  "id":2,
  "product_id":"ABCly139",
  "name":"Shirt",
  "category_id":"fashion",
  "color":"Black",
  "size":"M",
  "brand":"Tims",
  "type":"Polo",
  "price":10000,
  "main_image":null,
  "vat":null,
  "description":"A very good shirt",
  "product_condition":"new",
  "created_at":"2017-07-31 14:39:47",
  "updated_at":"2017-07-31 14:39:47"},
 {
  "id":3,
   "product_id":"ABCly139",
   "name":"Shirt",
   "category_id":"fashion",
   "color":"Blue","size":"S",
   "brand":"Tims",
   "type":"Polo",
   "price":12000,
   "main_image":null,
   "vat":null,
   "description":"A very good shirt",
   "product_condition":"new",
   "created_at":"2017-07-31 14:41:06",
   "updated_at":"2017-07-31 14:41:06"
  }
]

这是我的控制器

angular
.module('productsController',[])
.constant('baseUrl', 'http://127.0.0.1:8000/api/product')
.controller('productCtrl',['$scope','$log','$http','baseUrl','$rootScope',function($scope,$log,$http,baseUrl,$rootScope){
    $log.info('Product controller loaded');

    $http.get(baseUrl + '/fetch')
        .then(function (response){
            $scope.response = response;

            var i = $scope.response;

            angular.forEach(i, function(item){
                $scope.product = item;
                console.log($scope.product);    
            });


            return response.data;
        },function  (error){
            $scope.error = error;
            $log.info($scope.error);
        });
}]);

这是我的看法

<ul>
    <li ng-repeat="x in products">
        <span>{{x[0].name}}</span>
    </li>                       
</ul>

我尝试使用上面的代码记录到控制台但未显示在视图中

Answer 1

没有 $scope.products，只有 $scope.product，试试

<ul>
    <li ng-repeat="x in response">
        <span>{{x[0].name}}</span>
    </li>                       
</ul>

Answer 2

$scope.product = item 将覆盖所有项目，除了 i 数组的最后一项，你最好在下面这样做

    $scope.products=[];
    angular.forEach(i, function(item){
        $scope.products.push(item);
    });

 <ul>
    <li ng-repeat="x in products">
        <span>{{x.name}}</span>
    </li>                       
</ul>

或以下标记打印名称属性

的所有值

<ul>
    <li ng-repeat="x in response.data">
        <span>{{x.name}}</span>
    </li>                       
</ul>

Answer 3

将您的控制器更改为：

angular
.module('productsController',[])
.constant('baseUrl', 'http://127.0.0.1:8000/api/product')
.controller('productCtrl',['$scope','$log','$http','baseUrl','$rootScope',function($scope,$log,$http,baseUrl,$rootScope){
    $log.info('Product controller loaded');

    $http.get(baseUrl + '/fetch')
        .then(function (response){
            $scope.products = response
        },function  (error){
            $log.info(error);
        });
}]);

以及您对以下内容的看法：

<ul>
    <li ng-repeat="x in products">
        <span>{{x.name}}</span>
    </li>                       
</ul>

你应该可以开始了。

使用 ng-repeat 从对象的 http 响应数组中检索数据

using ng-repeat to retrieve data from an http response array of object

javascript

scope

http

angularjs

angularjs-ng-repeat