angularjs使用对象属性(不是数组)诱惑

时间:2014-11-10 04:48:09

标签: angularjs angular-template

我正在寻找一个模板,我可以用它来生成以下json的输出。

寻找外部循环的模板(必须显示标题(从上午7点到下午1:45等的会话),也可以从嵌套列表中获取值,然后继续内循环,I已完成内循环,但想知道如何处理外循环。

{  
   "Sessions from 7:00 am to 1:45 pm":[  
      {  
         "id":24,
         "name":"Breakfast",
         "group_header":"Sessions from 7:00 am to 1:45 pm"
      },
      {  
         "id":25,
         "name":"Opening Address",
         "group_header":"Sessions from 7:00 am to 1:45 pm"
      },
      {  
         "id":26,
         "name":"Auto Finance p",
         "group_header":"Sessions from 7:00 am to 1:45 pm"
      },
      {  
         "id":27,
         "name":"25 Years of Democratizing Access to Credit",
         "group_header":"Sessions from 7:00 am to 1:45 pm"
      },
      {  
         "id":28,
         "name":"Key Steps to Better Credit Line Management",
         "group_header":"Sessions from 7:00 am to 1:45 pm"
      },
      {  
         "id":29,
         "group_header":"Sessions from 7:00 am to 1:45 pm"
      },
   ]
},
{  
   "Sessions from 8:00 am to 1:30 pm":[  
      {  
         "id":66,
         "name":"General Session",
         "group_header":"Sessions from 8:00 am to 1:30 pm"
      },
      {  
         "id":67,
         "name":"Addressing Attrition: ",
         "group_header":"Sessions from 8:00 am to 1:30 pm"
      },
      {  
         "id":68,
         "name":"Regulatory Olympics: Why Conduct Risk Matters - Panel Discussion",
         "group_header":"Sessions from 8:00 am to 1:30 pm"
      }
   ]
}
<ul class="table-view">
        <li class="table-view-cell" ng-repeat="session in sessions">
            <ul class="cell">
                <li class="cell-content">
                    <div class="session" ng-class-odd="'odd'" ng-class-even="'even'">
                        <span class="name">{{session.name}}</span>
                    </div>
                </li>
            </ul>
        </li>
    </ul>

2 个答案:

答案 0 :(得分:0)

这是你想要的吗?

    <ul class="table-view">
            <li class="table-view-cell" ng-repeat="(key, value) in sessions">
              <div ng-repeat="(k, v) in value">
              {{k}}
                  <ul class="cell">
                      <li class="cell-content">
                          <div class="session" ng-repeat="val in v" ng-class-odd="'odd'" ng-class-even="'even'">
                              <span class="name">{{val.name}}</span>
                          </div>
                      </li>
                  </ul>
              </div>
            </li>
        </ul>

可以看到输出here

答案 1 :(得分:0)

您可以参考下面的plunkr代码。我希望这是你的要求。如果仍有遗漏让我知道,我会尽力帮助你。

http://plnkr.co/edit/TmS3ufeC8S98LtJgOyve?p=preview

<div ng-repeat="(heading,session) in sessions">
  <h3>{{heading}}</h3>
  <div ng-repeat="val in session">
    <span>{{val.name}}</span>
  </div>
</div>