使用ng-repeat迭代angularjs中存在的json字符串

Question

我在Angularjs控制器的$ scope.product中有以下Json字符串。 我應該如何使用ng-repeat指令打印所有單個組件。

我里面有以下ng-repeat

<div class="col-xs-3 " style="margin-right:-50px;" ng-repeat="(key, value) in product">
{{key}}{{value}}
</div>

JSON字符串：

[{
    "productId": "9970QYPMNAUUI",
    "productName": "Micca Speck 1080p Full-HD Ultra Portable",
    "imageUrl": "../../content/s3/images/99738A3AY55HN.jpg"
}, {
    "productId": "9970DLYKLAO8O",
    "productName": "iPhone 5 32GB",
    "imageUrl": "../../content/s3/images/9973CC9QJ7XOW.jpg"
}, {
    "productId": "9970GHW4ERO8O",
    "productName": "Samsung Galaxy Victory ",
    "imageUrl": "../../content/s3/images/9973KNOTXLB8C.jpg"
}, {
    "productId": "9970JK68GH02G",
    "productName": "Lenovo B590 Windows 7 Pentium",
    "imageUrl": "../../content/s3/images/9973LTDFXM6MY.jpg"
}, {
    "productId": "9970JX847GH2G",
    "productName": "HP 15.6-Inch Laptop PC",
    "imageUrl": "../../content/s3/images/9973L8S10MOZZ.jpg"
}, {
    "productId": "9970QYPOYUUIO",
    "productName": "Xbox 360 4GB",
    "imageUrl": "../../content/s3/images/9973954F3RCJE.jpg"
}, {
    "productId": "9970QYPTYHJUI",
    "productName": "KDLINKS HD720 Extreme FULL HD 1080P 3D Media Player",
    "imageUrl": "../../content/s3/images/9973A2GF2V26I.jpg"
}, {
    "productId": "9970GBBHVOB62",
    "productName": "Sony VAIO 17",
    "imageUrl": "../../content/s3/images/9973X27JIUUWO.jpg"
}, {
    "productId": "9970GBBHVOB61",
    "productName": "Sony VAIO ",
    "imageUrl": "../../content/s3/images/99737ANCLHGS7.jpg"
}, {
    "productId": "9970DLNMQ8819",
    "productName": "Upper Body Workout Bar",
    "imageUrl": "../../content/s3/images/99732QXRBCYBK.jpg"
}, {
    "productId": "9970DLXEVOQ01",
    "productName": "Google Chromecast",
    "imageUrl": "../../content/s3/images/9973GRKFEWUU1.jpg"
}, {
    "productId": "9970GHWY7898O",
    "productName": "Moto G - Boost",
    "imageUrl": "../../content/s3/images/9973JESH8RK2K.jpg"
}, {
    "productId": "9970DHT7VF02G",
    "productName": "Asus X551CA 16-Inch Laptop",
    "imageUrl": "../../content/s3/images/9973FO1ZIO1NW.jpg"
}, {
    "productId": "9970DLYTQCG0O",
    "productName": "iPhone 4",
    "imageUrl": "../../content/s3/images/99738H7DFFI8L.jpg"
}, {
    "productId": "9970GBBHVOB6O",
    "productName": "Samsung Chromebook ",
    "imageUrl": "../../content/s3/images/9973PID3L1XQL.jpg"
}, {
    "productId": "9970QYU8G9SHU",
    "productName": "Samsung Galaxy S III",
    "imageUrl": "../../content/s3/images/9973MBIC078EN.jpg"
}, {
    "productId": "9970DLMTQ882G",
    "productName": "Home Gym",
    "imageUrl": "../../content/s3/images/9973DXZK5G7JL.jpg"
}, {
    "productId": "9970DLNMQ890O",
    "productName": "Bowflex Dumbbells",
    "imageUrl": "../../content/s3/images/9973DXZRZQWFR.jpg"
}, {
    "productId": "9970QYPO0HJKU",
    "productName": "Xbox 360 4GB",
    "imageUrl": "../../content/s3/images/9973UTFBEJ7LB.jpg"
}, {
    "productId": "9970DLYTGTYW9",
    "productName": "iPhone 5 16 GB",
    "imageUrl": "../../content/s3/images/9973SRFC4A04H.jpg"
}, {
    "productId": "9970DLHQWE90O",
    "productName": "Keystone Fridge",
    "imageUrl": "../../content/s3/images/9973V7JQG7KJJ.jpg"
}, {
    "productId": "9970DLLA9NQ01",
    "productName": "Sony Playstation 4",
    "imageUrl": "../../content/s3/images/9973E2L9RGNZY.jpg"
}, {
    "productId": "9970DLXEVOQ0O",
    "productName": "Nikon Cool pix",
    "imageUrl": "../../content/s3/images/9973XPXQJVH4N.jpg"
}, {
    "productId": "9970QYPO0HUIO",
    "productName": "Xbox 360 250GB",
    "imageUrl": "../../content/s3/images/9973741XWV5WO.jpg"
}, {
    "productId": "9970G1H2J3K90",
    "productName": "Toshiba C55-A5281 16 Inch Laptop",
    "imageUrl": "../../content/s3/images/9973G3TCB7X8W.jpg"
}]

任何幫助，將不勝感激。

Answer 1

我已經使用您的樣本有效負載在此處創建了一個工作版本的插件。 查看index.html和script.js。

要遍歷項上的數組，需要在視圖中使用ng-repeat 。

假設一個控制器

function AwesomeController($scope, ..) {
    $scope.products = [
        {productName: "Foo", productId: 1},
        {productName: "Bar", productId: 2},
        {productName: "Baz", productId: 3},
    ]
}

要在視圖中進行迭代，可以執行以下操作

<div ng-repeat="product in products">
    <h2>{{product.productName}}</h2>
    <b>Product Id:</b> {{product.productId}}
</div>