嵌套的ngrepeats,数据结构不一致

时间:2015-03-27 02:55:50

标签: html json angularjs ng-repeat

我正在使用构造“note”卡的ng-repeat从JSON对象创建一组div。卡的数量由阵列中JSON对象的数量决定。 “类型”表示卡片的标题,“内容”表示正文。但是,“内容”的内容并不一致。在一些示例中,内容仅是句子或段落。在其他情况下,内容是一个数组。当内容是句子时,格式处理正常。当内容是一个数组时,我最终得到文本格式为[{"year":"2009", "operation":"caesarean"},{"year":"2010", "operation":"torn meniscus"}]的实际数组作为卡片的主体。有关如何实现这一点的任何想法,而无需单独编写每张卡的脚本吗?

HTML

<section name="patientinfo">
<div  align="center" ng-controller="HistoryCtrl">
<div class="grid-container" ng-repeat="record in historyItems">
    <div class="row" row>
        <div class="col-2" ng-repeat="history in record.History">
            <div class="note" draggable="true">
                <div class="row" id="rowhead3">
                    <div class="col-6" >
                        <span class="note-header">{{history.type}}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6" style="overflow: auto; height:250px;">
                        <div>
                            <span class="note-content">
                                {{history.content}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</section>

JSON示例(实际的JSON很大)。除了“历史”之外还有许多其他条目。此外,这些笔记不是来自真实的人,所以不要担心。

  "History": [
            {
                "type": "medical",
                "content": [
                    {
                        "condition": "IBS"
                    },
                    {
                        "condition": "Torn Meniscus Right Knee"
                    },
                    {
                        "condition": "Seasonal Allergies"
                    }
                ]
            },            
             {
                "type": "SOCIAL HISTORY",
                "content": "Lives with husband and 3 children. No history of violence, domestic violence, or rape. Feels safe at home and in relationship. ETOH on weekends (socially 4 drinks in one weekend occasionally) and occasionally smokes cigarettes and marijuana. Admits to very rare marijuana on special occasions."
            }]

我最终的结果示例: http://i.stack.imgur.com/MtuBN.png

1 个答案:

答案 0 :(得分:0)

您应该将数据转换或扩充为新格式,其中每个音符都具有以下结构:

{
    type: "string",
    contentType: "(text|list)",
    content: "string" // OR array of strings
}

为此,您需要使用自定义逻辑将数组中的每个对象转换为单个字符串。

然后只需使用ng-switch属性上的contentType来决定使用哪个标记(例如,如果<ul>contentType,则为list)。