【问题标题】:Load table from Ajax JSON with angular and ng-repeat使用 angular 和 ng-repeat 从 Ajax JSON 加载表
【发布时间】:2017-11-05 15:51:12
【问题描述】:

我尝试使用 Angular 和 ng-repeat 从 Ajax json 加载 HTML 表格。 我的问题是 JSON 有点复杂,我不知道如何访问“informationstyp”,这是我想在表格中显示的内容。 JSON(“值”)的根是一个列表。下一级(“informationstyper”)也是一个列表。

如何将“informationstyp”放入表格中? 我应该在我的 html 中写什么而不是 {{data.arendeslagId}}

我想要的表格是:

FK1002

FK1003

FK1004

感谢您的帮助。

我的html:

        <table class="table table-hover">
            <thead>
            <tr>
                <th>Arendeslagid</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="data in infotyper">
                <td>{{data.arendeslagId}}</td>
            </tr>
            </tbody>
        </table>

我的 JavaScript:

    $scope.infotyper = "";

    $scope.invoke = function() {
        $.ajax({
               "cache": false,
               "async": true,
               "crossDomain": true,
               "url": url",
               "method": "POST",
               "headers": {
                   "cache-control": "no-cache",
               },
            success: function (response) {
                   $scope.infotyper= response;
               }
           });
        };

我的 JSON 响应:

【问题讨论】:

  • 你可以在 Angular 中使用 $http 服务方法而不是 jquery ajax。
  • @hasan 谢谢,我现在改成$http

标签: javascript jquery angularjs json angularjs-ng-repeat


【解决方案1】:

尝试改变这一点:

success: function (response) {
  $scope.infotyper= response;
}

到这里:

success: function (response) {
  $scope.infotyper= response.values;
  $scope.$apply();
}

如果您使用 AngularJS,我强烈建议您使用 $http 服务而不是 jQuery 来处理 AJAX 请求

【讨论】:

  • 这也不行。如何进入 JSON 的下一个级别(“informationstyper”)?
  • 该字段是一个数组。所以你需要另一个 ng-repeat 来在这些元素中循环。例如:&lt;tr ng-repeat="data in infotyper"&gt; &lt;td&gt;{{data.arendeslagId}}&lt;/td&gt; &lt;td ng-repeat="typer in data.informationstyper"&gt;{{typer.informationstyp}}&lt;/td&gt; &lt;/tr&gt;
  • 谢谢,这正是我所需要的!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-10-17
  • 2015-06-20
相关资源
最近更新 更多