Question

我的问题如下：

我有一个带有可变文档的NoSQL数据库。例如，一个文档将包含5个字段，其他文档包含7个字段。现在我有这个面板，它将显示以下数据：

<div class="container">
        <div id="Opdracht" class="collapse">
            <div class="panel panel-default">
                <div class="panel-heading text-center">{{title}}</div>
                <div class="panel-body" onload="show({{ex}})">
                    <ul class="list-group">
                        <li class="list-group-item"> Beschrijving: {{description}}</li>
                        <li class="list-group-item">score: {{score}}</li>
                        <li class="list-group-item">Extra opdracht: {{extra}}</li>
                        <li class="list-group-item">extra te verdienen punten: {{extra_score}}</li>
                        <li class="list-group-item">totaal te verdienen: {{score + extra_score}}</li>
                    </ul>
                </div>

                <div class="panel-footer">
                    <a href="#Opdracht" class="btn btn-default" data-toggle="collapse">Close</a>
                </div>
            </div>

        </div>
    </div>

此代码的问题在于它们具有<li>的硬编码和静态数量（固定数量）。我想用一个foreach函数编写一个函数，该函数创建一个包含kay值的<li>，如：

 <li class="list-group-item">score: {{score}}</li>

我想知道这个函数的用法，以及如何将它绑定到面板加载的事件。

如果有帮助：我在客户端使用Bootstrap和AngularJS，在服务器端使用Mongoose和nodeJS。

Answer 1

使用ng-repeat

 <ul>
   <li ng-repeat="score in data">
     {{ score }}
  </li>
 </ul>

Answer 2

您可以使用ng-repeat同时获取密钥和属性。

<ul>
  <li ng-repeat="(key, value) in data">
    {{ key }}: {{ value }}
  </li>
</ul>

与此示例数据一起使用时：

$scope.data = { a: 1, b: 2, c: 3 };

它会生成以下HTML。

<ul>
  <li>a: 1</li>
  <li>b: 2</li>
  <li>c: 3</li>
</ul>

Answer 3

请考虑您的文档代码如下：

$scope.users = [
{
        'title' : 'dsfsdf',
        'ex' : 'dsfsdf',
        'lists' : {
         'description' : 'dsfsdf',
        'score' : 'sdfsdf',
        'extra' : 'dsfsdf',
        'extra_scope' : 'dsfs' 
        }
    },
    {
        'title' : 'dfssf',
        'ex' : 'sfdsdf',
        'lists' : {
         'description' : 'dsfsdf',
        'score' : 'sdfsdf',
        'extra' : 'dsfsdf',
        'extra_scope' : 'dsfs',
        'second_extra' : 'sdfsdf'
        }
    },
    {
        'title' : 'dsfdsf',
        'ex' : 'sdfsf',
        'lists' : {
         'description' : 'dsfsdf',
        'score' : 'sdfsdf',
        'extra' : 'dsfsdf',
        'extra_scope' : 'dsfs',
        'second_extra' : 'sdfsdf',
        'third_extra' : 'sdfsdf',
        }
    }
];

您的HTML就像

 <div class="panel panel-default" ng-repeat="user in users">
                <div class="panel-heading text-center">{{user.title}}</div>
                <div class="panel-body" onload="show({{user.ex}})">
                    <ul class="list-group">
                        <li class="list-group-item" ng-repeat="(key, val) in user.lists">{{key}} : {{val}}</li>
                    </ul>
                </div>

                <div class="panel-footer">
                    <a href="#Opdracht" class="btn btn-default" data-toggle="collapse">Close</a>
                </div>
            </div>

参阅此Plunker

根据检索到的JSON创建<li>项目

3 个答案: