Question

大家，我有这样的场景......

$scope.flags = {
            'porIdade': {
                'text': 'Por idade',
                'flags': {
                    'meses1a3': '1 a 3 meses',
                    'meses4a7': '4 a 7 meses',
                    'meses8a12': '8 a 12 meses'
                }
            },
            'sexo': {
                'text': 'Sexo',
                'flags': {
                    'menino': 'Menino',
                    'menina': 'Menina'
                }
            },
            'estacao': {
                'text': 'Coleção',
                'flags': {
                    'menino': 'Inverno',
                    'menina': 'Verão'
                }
            }
        }

基本上我需要将例如：porIdade.text放入面板 - 标题转换为DIV 并填充UL内的孩子。我不知道如何使用ng-repeat。这是html。

<div class="panel panel-default" id="leftColumn">
    <div class="panel-heading">PARENT</div>
    <ul class="list-group">
        <li class="list-group-item">Child1</li>
        <li class="list-group-item">Child1</li>
        <li class="list-group-item">Child1</li>
        <li class="list-group-item">Child1</li>
    </ul>
</div>

所以，如果我设置这样的东西： PARENT

这将创建3行面板标题。所以，要解决这个问题，我需要像...这样的东西。

<ng-repeat start here (key,val) in flags>
<div class="panel panel-default" id="leftColumn">
    <div class="panel-heading">PARENT</div>
    <ul class="list-group">
        <li class="list-group-item" ng-repeat children>{{child.text}}</li>
    </ul>
</div>
</ng-repeat finish here>

有什么建议吗？我不能在面板之前使用DIV :(因此，这个建议无效。这会导致引导程序出现奇怪的行为。

Answer 1

你需要使用这样的嵌套ng-repeat :(我删除了类以保持概念的可读性）

<div ng-repeat="data in flags">
  <div ng-bind="data.text"></div>
  <ul>
    <li ng-repeat="item in data.flags" ng-bind="item"></li>
  </ul>
</div>

在元素外部使用嵌套的ng-repeat

1 个答案: