在html页面中使用angularjs显示json数据

时间:2015-05-18 10:20:42

标签: json angularjs

我必须在html页面中显示名称和所有者名称,数据是JSON格式(来自MongoDB数据库)

在html中显示时,我的名字正确,但是所有者名称显示不正确,而是显示所有者内部的完整对象。

JSON:

/* 1 */
{
    "_id" : ObjectId("550994e21cba9597624195aa"),
    "name" : "Deploy Renderer Code",
    "detail" : "Deploy Renderer code in PROD 1 boxes.",
    "scheduledStartDate" : ISODate("2015-05-12T09:00:00.000Z"),
    "scheduledEndDate" : ISODate("2015-05-12T11:00:00.000Z"),
    "env" : "PROD 1",
    "type" : "Pre Release Activity",
    "team" : {
        "id" : "55097d581cba95976241958d",
        "name" : "Renderer"
    },
    "owners" : [ 
        {
            "ownerName" : {
                "id" : "VENKAT17",
                "name" : "Sundar Venkataraman"
            },
            "ownerTeam" : {
                "id" : "550992951cba9597624195a8",
                "name" : "RETS"
            }
        }
    ],
    "comments" : "Add SPI number, if any.",
    "release" : {
        "id" : "5509904f1cba9597624195a5",
        "name" : "LexisAdvance R5.1"
    },
    "status" : "Assigned"
}

角度视图(html代码)

<div class="row">
  <table class="table table-bordered">
    <thead>
        <tr>
            <th style="text-align: center;">Task name</th>
            <th style="text-align: center;">Owner name</th>
            <th style="text-align: center;">Authorize</th>
        </tr>
    </thead>
        <tbody>
            <tr ng-repeat="task in taskDetails">
                <td style="text-align: center;">{{task.name}}</td>
                <td style="text-align: center;">{{task.owners}}</td>
                <td  style="text-align:center;">
                    <button class="btn btn-mini btn-primary" ng-click="approveTask(taskDetails.indexOf(task), task)">Approve</button>
                    <button class="btn btn-mini btn-danger" ng-click="rejectTask(taskDetails.indexOf(task), task)">Reject</button>
                </td>
            ![enter image description here][1]</tr>

        </tbody>
  </table>

1 个答案:

答案 0 :(得分:1)

task.owners是一个对象列表。要获得第一个所有者,您可以使用:

<td style="text-align: center;">{{task.owners[0].ownerName.name}}</td>

通过所有业主将更好:

<td style="text-align: center;">
  <span ng-repeat="owner in task.owners">{{owner.ownerName.name}}{{$last ? '' : ', '}}</span>
</td>