Question

我使用Angular来使用nodejs web-service。
但我无法遍历数据。

Json数据：

  [
  {
    "_id": "595fbe940eaeda0b387568fc",
    "randomId": "0001",
    "sName": "xyz abc",
    "des": "A wide variety of xyz abc",
    "__v": 0,
    "os": {
      "od": "2017-07-06T18:30:00.000Z",
      "ok": "2017-07-06T18:30:00.000Z",
      "dp": 10
    },
    "otherProductAttributes": {
      "l": "23",
      "mt": "fabricType"
    },
    "productStock": [
      {
        "size": 28,
        "color": "Red",
        "quantity": "120",
        "inStock": "true",
        "price": 234.56,
        "_id": "595fbe940eaeda0b387568ff",
        "imagePaths": [
          "https://image.jpg",
          "https://image.jpg",
          "https://image.jpg"
        ]
      },
      {
        "size": 28,
        "color": "Black",
        "quantity": "10",
        "inStock": "true",
        "price": 89,
        "_id": "595fbe940eaeda0b387568fe",
        "imagePaths": [
          "https://image.jpg"
        ]
      },
      {
        "size": 30,
        "color": "Red",
        "quantity": "999",
        "inStock": "true",
        "price": 999.99,
        "_id": "595fbe940eaeda0b387568fd",
        "imagePaths": [
          "https://image.jpg"
        ]
      }
    ],
    "uploadDate": "2017-07-06T18:30:00.000Z"
  },
  {
    "_id": "595fc0b60eaeda0b38756900",
    "randomId": "0002",
    "sName": "xyz abc",
    "des": "A wide variety of xyz abc",
    "__v": 0,
    "os": {
      "od": "2017-07-06T18:30:00.000Z",
      "ok": "2017-07-06T18:30:00.000Z",
      "dp": 10
    },
    "otherProductAttributes": {
      "l": "23",
      "mt": "fabricType"
    },
    "productStock": [
      {
        "size": 38,
        "color": "Red",
        "quantity": "120",
        "inStock": "true",
        "price": 234.56,
        "_id": "595fc0b60eaeda0b38756903",
        "imagePaths": [
          "https://image.jpg",
          "https://image.jpg",
          "https://image.jpg"
        ]
      },
      {
        "size": 26,
        "color": "Black",
        "quantity": "10",
        "inStock": "true",
        "price": 89,
        "_id": "595fc0b60eaeda0b38756902",
        "imagePaths": [
          "https://image.jpg"
        ]
      },
      {
        "size": 30,
        "color": "Red",
        "quantity": "999",
        "inStock": "true",
        "price": 999.99,
        "_id": "595fc0b60eaeda0b38756901",
        "imagePaths": [
          "https://image.jpg"
        ]
      }
    ],
    "uploadDate": "2017-07-06T18:30:00.000Z"
  }
]

HTML页面

<div class="panel panel-default" ng-init="getProducts()">
    <!-- Default panel contents -->
    <div class="panel-heading">Products</div>
    <div class="panel-body">
        <div class="row">
            <div ng-repeat="product in products">
             <p>{{product.randomId}}</p>
             <p>{{product.os.od}}</p>
             <p>{{product.otherProductAttributes.l}}</p>
             <p>{{prooduct.productStock.size}} </p>
             <p>{{prooduct.productStock.imagePaths}}</p>

              </div>
            </div>
        </div>
    </div>

我正在尝试访问上面提到的数据字段，但是html页面没有呈现任何内容我在控制台上打印了产品数组，并打印整个数组。所以我的HTML页面有数据，但是根据我的要求不能渲染。
请帮忙。

Answer 1

您需要使用嵌套的ng-repeat来从stockPath生成图像。

 <div ng-repeat="images in product.productStock">
             <p>{{images.imagePaths}}</p>
 </div>

<强>样本

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
   $scope.products = [
  {
    "_id": "595fbe940eaeda0b387568fc",
    "randomId": "0001",
    "sName": "xyz abc",
    "des": "A wide variety of xyz abc",
    "__v": 0,
    "os": {
      "od": "2017-07-06T18:30:00.000Z",
      "ok": "2017-07-06T18:30:00.000Z",
      "dp": 10
    },
    "otherProductAttributes": {
      "l": "23",
      "mt": "fabricType"
    },
    "productStock": [
      {
        "size": 28,
        "color": "Red",
        "quantity": "120",
        "inStock": "true",
        "price": 234.56,
        "_id": "595fbe940eaeda0b387568ff",
        "imagePaths": [
          "https://image.jpg",
          "https://image.jpg",
          "https://image.jpg"
        ]
      },
      {
        "size": 28,
        "color": "Black",
        "quantity": "10",
        "inStock": "true",
        "price": 89,
        "_id": "595fbe940eaeda0b387568fe",
        "imagePaths": [
          "https://image.jpg"
        ]
      },
      {
        "size": 30,
        "color": "Red",
        "quantity": "999",
        "inStock": "true",
        "price": 999.99,
        "_id": "595fbe940eaeda0b387568fd",
        "imagePaths": [
          "https://image.jpg"
        ]
      }
    ],
    "uploadDate": "2017-07-06T18:30:00.000Z"
  },
  {
    "_id": "595fc0b60eaeda0b38756900",
    "randomId": "0002",
    "sName": "xyz abc",
    "des": "A wide variety of xyz abc",
    "__v": 0,
    "os": {
      "od": "2017-07-06T18:30:00.000Z",
      "ok": "2017-07-06T18:30:00.000Z",
      "dp": 10
    },
    "otherProductAttributes": {
      "l": "23",
      "mt": "fabricType"
    },
    "productStock": [
      {
        "size": 38,
        "color": "Red",
        "quantity": "120",
        "inStock": "true",
        "price": 234.56,
        "_id": "595fc0b60eaeda0b38756903",
        "imagePaths": [
          "https://image.jpg",
          "https://image.jpg",
          "https://image.jpg"
        ]
      },
      {
        "size": 26,
        "color": "Black",
        "quantity": "10",
        "inStock": "true",
        "price": 89,
        "_id": "595fc0b60eaeda0b38756902",
        "imagePaths": [
          "https://image.jpg"
        ]
      },
      {
        "size": 30,
        "color": "Red",
        "quantity": "999",
        "inStock": "true",
        "price": 999.99,
        "_id": "595fc0b60eaeda0b38756901",
        "imagePaths": [
          "https://image.jpg"
        ]
      }
    ],
    "uploadDate": "2017-07-06T18:30:00.000Z"
  }
];
});

<!DOCTYPE html>
<html>
<head> 
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <div ng-app="myApp" ng-controller="AppCtrl">
  <div class="panel panel-default" ng-init="getProducts()">
    <!-- Default panel contents -->
    <div class="panel-heading">Products</div>
    <div class="panel-body">
        <div class="row">
            <div ng-repeat="product in products">
             <p>{{product.randomId}}</p>
             <p>{{product.os.od}}</p>
             <p>{{product.otherProductAttributes.l}}</p>                 
              <div ng-repeat="images in product.productStock">
             <p>{{images.size}} </p>
             <p>{{images.imagePaths}}</p>
              </div>
              </div>
            </div>
        </div>
    </div>

  </div>
</body>

</html>

Answer 2

请注意，在循环的对象中有一个内部数组productStock，因此循环的方式永远不会起作用。

假设你在控制器初始化中有一些东西 -

$scope.products = [];    

Service.getData().then(function(response){      
       $scope.products = response;      
});

在html部分引入另一个ng-repeat来循环所有股票

<div ng-repeat="product in products">
   <p>{{product.randomId}}</p>
   <p>{{product.os.od}}</p>
   <p>{{product.otherProductAttributes.l}}</p>
    <div ng-repeat="pstock in product.productStock">          
        <p>{{pstock.size}} </p>
        <p>{{pstock.imagePaths}}</p>
   </div>
</div>

Answer 3

由于productStock是一个对象数组

，因此必须再使用一次ng-repeat

 <div class="row">
    <div ng-repeat="product in products">
        <p>{{product.randomId}}</p>
        <p>{{product.os.od}}</p>
        <p>{{product.otherProductAttributes.l}}</p>
        <div ng-repeat="value in product.productStock">
            <p>{{value.size}} </p>
            <div ng-repeat="image in value.imagePaths">
                <img ng-src="{{image}}">
            </div>
        </div>
    </div>
</div>

无法使用ng-repeat循环遍历数组

3 个答案: