如何使用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对象

回答

相关问题