当前位置: 首页 > 面试题库 >

嵌套ng-repeat

乜飞航
2023-03-14
问题内容

我有一些虚拟XML文件:

<Week number="2013-W45">
    <Day dow="1" templateDay="Monday">
        <Job name="wake up" >
            <Job name="get dressed" >
                <Job name="prepare breakfast" >
                    <Job name="eat breakfast" > </Job>
                </Job>
            </Job>
        </Job>
        <Job name="work 9-5" >
        </Job>
    </Day>
    <Day dow="2" templateDay="Tuesday"   >
        <Job name="wake up" >
            <Job name="get dressed" >
                <Job name="prepare breakfast" >
                    <Job name="eat breakfast" > </Job>
                </Job>
            </Job>
        </Job>
        <Job name="work 9-5" >
        </Job>
        <Job name="football" >
        </Job>
    </Day>
    <Day dow="3"   templateDay="Wednesday" >
        <Job name="wake up" >
            <Job name="get dressed" >
                <Job name="prepare breakfast" >
                    <Job name="eat breakfast" > </Job>
                </Job>
            </Job>
        </Job>
        <Job name="work 9-5" >
        </Job>
    </Day>
    <Day dow="4"  templateDay="Thursday"  >
        <Job name="wake up" >
            <Job name="get dressed" >
                <Job name="prepare breakfast" >
                    <Job name="eat breakfast" > </Job>
                </Job>
            </Job>
        </Job>
        <Job name="work 9-5" >
        </Job>
        <Job name="football" >
        </Job>
    </Day>
    <Day dow="5" templateDay="Friday" >
        <Job name="go to pub" >
        </Job>
    </Day>
    <Day dow="6" templateDay="Saturday"  >
        <Job name="work 9-5" >
        </Job>
    </Day>
    <Day dow="7" templateDay="Sunday" >
        <!-- nothing to do on sunday -->
    </Day>
</Week>

使用此库http://code.google.com/p/x2js/将其转换为json,并转换为变量myData

 {
    "Week" : {
        "Day" : [{
                "Job" : [{
                        "Job" : {
                            "Job" : {
                                "Job" : {
                                    "_name" : "eat breakfast"
                                },
                                "_name" : "prepare breakfast"
                            },
                            "_name" : "get dressed"
                        },
                        "_name" : "wake up"
                    }, {
                        "_name" : "work 9-5"
                    }
                ],
                "_dow" : "1",
                "_templateDay" : "Monday"
            }, {
                "Job" : [{
                        "Job" : {
                            "Job" : {
                                "Job" : {
                                    "_name" : "eat breakfast"
                                },
                                "_name" : "prepare breakfast"
                            },
                            "_name" : "get dressed"
                        },
                        "_name" : "wake up"
                    }, {
                        "_name" : "work 9-5"
                    }, {
                        "_name" : "football"
                    }
                ],
                "_dow" : "2",
                "_templateDay" : "Tuesday"
            }, {
                "Job" : [{
                        "Job" : {
                            "Job" : {
                                "Job" : {
                                    "_name" : "eat breakfast"
                                },
                                "_name" : "prepare breakfast"
                            },
                            "_name" : "get dressed"
                        },
                        "_name" : "wake up"
                    }, {
                        "_name" : "work 9-5"
                    }
                ],
                "_dow" : "3",
                "_templateDay" : "Wednesday"
            }, {
                "Job" : [{
                        "Job" : {
                            "Job" : {
                                "Job" : {
                                    "_name" : "eat breakfast"
                                },
                                "_name" : "prepare breakfast"
                            },
                            "_name" : "get dressed"
                        },
                        "_name" : "wake up"
                    }, {
                        "_name" : "work 9-5"
                    }, {
                        "_name" : "football"
                    }
                ],
                "_dow" : "4",
                "_templateDay" : "Thursday"
            }, {
                "Job" : {
                    "_name" : "go to pub"
                },
                "_dow" : "5",
                "_templateDay" : "Friday"
            }, {
                "Job" : {
                    "_name" : "work 9-5"
                },
                "_dow" : "6",
                "_templateDay" : "Saturday"
            }, {
                "_dow" : "7",
                "_templateDay" : "Sunday"
            }
        ],
        "_number" : "2013-W45"
    }
}

Day可以具有任意数量的Job,Job可以嵌套并且包含任意数量的其他Job。

现在使用此代码

<p ng-repeat="day in myData.Week.Day">
   {{day._dow}} - {{day._templateDay}}
</p>

我可以列出有效的日期。我希望使用以下代码

<p ng-repeat="day in myData.Week.Day">
    {{day._dow}} - {{day._templateDay}}

    <span ng-repeat="job in day.Job">
        {{job._name}}
    <span/>
</p>

我可以列出当天的工作日和最高职位,但这是行不通的。(要列出嵌套的Jobs,将是下一个任务,而不是现在询问该任务)。

那么,如何至少列出顶级职位?同样在json格式中,我看到一些Jobs Objects和一些are Arrays。如何处理两种情况?

PS .:使用角度1.2.0-rc.3


问题答案:

最好使用适当的JSON格式,而不是直接使用从XML转换而来的格式。

[
  {
    "number": "2013-W45",
    "days": [
      {
        "dow": "1",
        "templateDay": "Monday",
        "jobs": [
          {
            "name": "Wakeup",
            "jobs": [
              {
                "name": "prepare breakfast",

              }
            ]
          },
          {
            "name": "work 9-5",

          }
        ]
      },
      {
        "dow": "2",
        "templateDay": "Tuesday",
        "jobs": [
          {
            "name": "Wakeup",
            "jobs": [
              {
                "name": "prepare breakfast",

              }
            ]
          }
        ]
      }
    ]
  }
]

这将使事情变得越来越容易遍历

Now you can write the loop as -

<div ng-repeat="week in myData">
   <div ng-repeat="day in week.days">
      {{day.dow}} - {{day.templateDay}}
      <b>Jobs:</b><br/> 
       <ul>
         <li ng-repeat="job in day.jobs"> 
           {{job.name}} 
         </li>
       </ul>
   </div>
</div>


 类似资料:
  • 问题内容: 我有两个不同的应用程序。在集成到单个应用程序期间,我不得不 嵌套ng-views。 对于示例(index.html)是 我的应用程序视图之一是(view2.html) 现在,此应用程序内部再次具有不同的视图。 我试过了,但是页面没有加载。有可能嵌套ng-views吗? 如果不可能,可以解释一下 提前致谢 问题答案: 更新的答案: UI路由器(现在位于此处:https : //angul

  • 问题内容: 我有一个JSON对象,表示为: 我需要在 第二 层上做一个中继器,列出“虚假”数字。 我已经知道如何获得最高水平 但是我不清楚循环降级的顺序。例如,这是错误的: 我也知道如何 嵌套 中继器来实现这一点,但是在这种情况下,我根本不需要显示顶层。 澄清说明 这里的目标是有一个带有4个“伪”数字的列表(每个包裹有2个,顺序中有2个包裹)。 问题答案: 大量搜索不错的简单解决方案以进行动态迭代

  • 问题内容: 我想知道是否存在针对此类问题的简单解决方案。 我有一个对象注释,该对象注释又可以包含注释,并且这些注释也可以包含注释…并且此操作可以进行未知数量的循环。 这是数据结构的示例: 可以说我会写2级评论: 我该如何使div的嵌套注释达到“ n”级? 问题答案: 最简单的方法是创建通用部分,以便您可以使用递归调用和呈现它。 这是局部的: 数据模型应为列表。 我为您创建了一个演示,希望对您有所帮

  • 问题内容: 我有一个水平月历,显示员工每天的活动。 当前它正在使用具有以下层次结构/流程的表 1)控制器:根据选择的月份/年份,生成一个包含该月每天的数组。$ scope。$ watchCollection每当年份或月份更改时都会更新数组。 如代码所示,我可以做的更好: 问题在于getAssignments()是“昂贵的”,因为它需要检查: 是公共假期吗? 员工在那天工作吗? 员工有假期吗? 获取

  • 问题内容: 我在另一个ng-repeat中嵌套了一个ng-repeat。我想在单击按钮时将一些值推入第二个数组 谁可以帮我这个事。谢谢 问题答案:

  • 我有一个json,包含如下对象数组 在我看来,我想用ngFor呈现json,就像这样 你的名字叫什么? abc 定义 Ghi jkl