正在创建<李>项，具体取决于检索到的JSON

Creating <li> items depending on retrieved JSON

本文关键字：检索 取决于 JSON 创建 lt gt      更新时间：2023-09-26

我的问题如下：

我有一个包含可变文档的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。

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

$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

使用ng重复

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

您可以使用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>
相关文章：