如何使用ng-repeat访问数组中的对象

时间:2016-08-17 10:35:32

标签: angularjs mongodb

我有以下数据

{
"_id": ObjectId("57b2fb48d69e8cf00fd32036"),
"wName": "Sara",
"wType": "Shared",
"userId": "57443657ee5b5ccc30c4e6f8",
"productsInWishlists": [
   {
    "Product_Id": "b7ad3650-b752-4a93-85a2-a54a309c5e9b",
    "Product_name": "AmazonBasics BTV4 Micro Wireless Bluetooth Speaker (Blue)",
    "Brand": "AmazonBasics",
    "Color": "Blue",
    "Image": "http://ecx.images-amazon.com/images/I/414G8rQROwL._SX300_QL70_.jpg",
    "Price": "999.00",
    "Description": "",
    "Url": "http://www.amazon.in/dp/B00LLJ5BPI?psc=1",
    "userId": ObjectId("57443657ee5b5ccc30c4e6f8") 
   },
   {
    "Product_Id": "42f350b1-6d63-4f17-9dbc-bea6ae1abe24",
    "Product_name": "S460-BLUE Bluetooth Headphone With FM and Calling",
    "Brand": "Acid Eye",
    "Color": "",
    "Image": "http://ecx.images-amazon.com/images/I/41XZKFBo19L._SY300_QL70_.jpg",
    "Price": "999.00",
    "Description": "High bass bluetooth headphone with calling facility , inbuilt FM & memory card slot (expandable upto 32 GB) with Good battery backup",
    "Url": "http://www.amazon.in/dp/B01GFB0638?psc=1",
    "userId": ObjectId("57443657ee5b5ccc30c4e6f8") 
   } 
 ] 
}

我在vm.rslt1中获得了上述结果。现在我想访问productsInWishlists中的对象。

<md-card class="md-whiteframe-3dp" ng-repeat="product in vm.rslt1" flex="40" style="max-width: 50%;">
  <div layout="row" layout-align="end center"> 
    <md-button ng-click="deletePrdct(vm.rslt1[$index]._id, product.Product_Id, $index)" aria-label="Delete" class="md-icon-button md-mini">
      <md-icon md-svg-icon="/assets/icons/fonts/delete.svg" aria-label="Delete"></md-icon>
        <md-tooltip md-direction="bottom">Remove from Wishlist</md-tooltip>
    </md-button>
  </div>
  <img ng-src="{{ product.Image }}" class="md-card-image" alt="Image here" style="margin-left:80px">

  <div style="margin-left:15px">
    <h2>&#8377;{{ product.Price }}</h2>
  </div>

  <div style="margin-left:15px">
    <h2>{{product.Product_name | characters:30}}</h2>
  </div>

  <md-card-content>
    <p align="justify" style="text-indent: 30px">
       {{ product.Description | characters:150}}
    </p>
  </md-card-content>
</md-card>

如果我使用了product.productsInWishlists.Product._Id我得到了该产品的ID等等。请帮我解决这个问题。

2 个答案:

答案 0 :(得分:2)

vm.rslt1是一个以这种方式使用的对象

<md-card class="md-whiteframe-3dp" ng-repeat="product in vm.rslt1.productsInWishlists" flex="40" style="max-width: 50%;">
  <div layout="row" layout-align="end center"> 

.....

</md-card>

如果vm.rslt1是一个使用这种方式的数组

    <md-card class="md-whiteframe-3dp" ng-repeat="product in vm.rslt1" flex="40" style="max-width: 50%;">
    <div layout="row" layout-align="end center">

        <div ng-repeat="product in product.productsInWishlists">
            ...
        </div>
        .....
</md-card>

答案 1 :(得分:1)

只需添加另一个ng-repeat:

<md-card-content>
  <p align="justify" style="text-indent: 30px">
     {{ product.Description | characters:150}}
  </p>
</md-card-content>
<!-- your previous code.. -->

<!-- add a sub ng-repeat to cycle the internal array -->
<div ng-repeat="element in product.productsInWishlists | track by $index"> 
   <span>{{element.Product_Id}}</span>
   <!--and so on..-->
</div>