如何使用ng repeat重複呈現嵌套的json對象

我試圖搜索解決方案，但沒有得到它。我還使用了嵌套的ng重複和使用ng repeat的不同方法，Items值總是以字符串形式出現。如何使用ng repeat重複呈現嵌套的json對象

我要顯示這樣的，

_id: 59889d877560a92480a4b354 
    firstName: ayaz 
    lastName: khatri 
    items: 
     _id:item3, 
     _name:My Item #4 
     _price:999.99 
     _quantity:1 

    totalItems: 1 
    totalPrice: 999.99

這裏控制器

var app = angular.module('app', []); 
    app.controller('mainCtrl', function($scope) { 
    $scope.userInfo = { 
    "_id" : ObjectId("59885d800560a92480a4b354"), 
    "firstName" : "ayaz", 
    "lastName" : "khatri", 
    "items" : [ 
     { 
      "_id" : "item3", 
      "_name" : "My Item #4", 
      "_price" : 999.99, 
      "_quantity" : 1 
     } 
       ], 
    "totalItems" : 1, 
    "totalPrice" : 999.99 
    } 

    });

這裏納克視圖

<body ng-controller="mainCtrl" class="container" style="padding-top:30px"> 
    <ul ng-repeat="user in userInfo"> 
    <li ng-repeat="(x,y) in user"> 

     {{x}}:{{y}} 

    </li> 

    </ul> 
    </body> 
    </html>

來源

2017-08-08 Noman Kt

'NG-重複=「userI用戶nfo「'不能工作，因爲'userInfo'是一個對象，而不是對象的數組（列表）。 –

如果你將刪除帶括號的ObjectId，那麼這將正常工作。 - Jeremy Thille –

哦，是的，當然，ObjectId是一個MongoDB的東西，它在Angular中沒有定義。你的控制檯不說'ObjectId是未定義的？ –

我叉你plunkr例如它的工作原理here

通過創建自定義角度is_object方法並執行如下操作，可以確定您的嵌套值是否爲對象。

// java描述

$scope.is_object = function (something) { 
    return typeof (something) == 'object' ? true : false; 
};

// HTML（列表溶液）

<ul ng-repeat="user in userInfo"> 
    <li ng-repeat="(x,y) in user"> 
    {{x}} : 
    <span ng-if="is_object(y) == false"> {{ y }} </span> 
    <ul ng-if="is_object(y)"> 
     <li ng-repeat="(k,v) in y"> 
      <br> 
      <ul> 
      <li ng-repeat="(k2,v2) in v"> 
       {{k2}} : {{ v2 }} 
      </li> 
      </ul> 
     </li> 
    </ul> 
    </li> 
</ul>

// HTML（表溶液）

<table ng-repeat="user in userInfo" border="1"> 
    <tr ng-repeat="(x,y) in user"> 
    <td> 
     {{x}} :</td> 
     <td> 
     <span ng-if="is_object(y) == false"> {{ y }} </span> 
     <ul ng-if="is_object(y)" style="list-style:none; margin-left:-60px"> 
      <li class="border-right: 1px solid" ng-repeat="(k,v) in y" style="float:left;border-right: 1px solid" > 
       <br> 
       <ul> 
       <li ng-repeat="(k2,v2) in v"> 
        {{k2}} : {{ v2 }} 
       </li> 
       </ul> 
      </li> 
     </ul> 
    </td> 
    </tr> 
</table>

來源

2017-08-08 13:56:13 hasan

如果項目有多個對象，那麼它將如何工作？ –

兄弟你有解決辦法嗎？ –

@NomanKt我已經更新了我的答案，現在它可以按照您的意願工作，您可以將其用於多個對象。 – hasan

如何使用ng repeat重複呈現嵌套的json對象

回答

相關問題