在表中打印对象数组（Angular JS）答案

【问题标题】：Printing array of objects in table (Angular JS)在表中打印对象数组（Angular JS）
【发布时间】：2016-09-28 20:20:58
【问题描述】：

我有一组像这样的对象：

$scope.sales = [
{id: 15, location:'neverland'},
{id: 16, location:'farawayland'},
{id: 17, location:'highland'}
];

我试图在表格中显示这个数组，它应该是这样的：

标识 |位置

15 |梦幻岛

16 |远方

17 |高地

我的html：

<input type="text" ng-model="sales[0].id">
<table class="table table-hover">
    <tr ng-repeat="x in sales">
        <td>{{x.id}}</td>
        <td>{{x.location}}</td>
    </tr>


</table>

值 15 的输入字段被打印出来。如果我还询问第二个或第三个值，它就会起作用。但该表由 3 个空行组成。

如果我添加一个索引（甚至是<td>{{x[0].id}}</td>），我会收到一个服务器错误。

【问题讨论】：

右键单击并选择“检查元素”。这将清楚地表明内容是否确实存在，但只是没有显示。如果您的 CSS 不合适，可能会发生这种情况。
@Amyblankenship 已经这样做了。没有内容，只是空的
您展示的内容应该可以正常工作。创建一个重现这个的演示......在 plunker 中设置一个非常简单

<!DOCTYPE html> <html ng-app="app"> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body ng-controller="Controller"> <input type="text" ng-model="sales[0].id"> <table class="table table-hover"> <tr ng-repeat="x in sales"> <td>{{x.id}}</td> <td>{{x.location}}</td> </tr> </table> </body> </html>

var app = angular.module('app', []); app.controller("Controller", ['$scope', function($scope) { $scope.sales = [{ id: 15, location: 'neverland' }, { id: 16, location: 'farawayland' }, { id: 17, location: 'highland' }]; }]);