[英]Display JSON data using an Angular DataTable
我正在使用Angular DataTable使用JSON数组显示数据,但未显示数据。 我认为我的HTML页面有问题。 你能找到问题吗?
HTML档案:
<tbody>
<tr ng-repeat="user in userList">
<td><a class="green shortinfo" href="javascript:;" ng-click="childInfo(user, $event)" title="Click to view more"><i class="glyphicon glyphicon-plus-sign"></a></td>
<td>{{user.name}}</td>
<td>{{user.position}}</td>
<td>{{user.office}}</td>
<td><div class="btn-group">
<button type="button" class="btn btn-default btn" ng-click="edit($index);"><i class="glyphicon glyphicon-pencil"></i></button>
<button type="button" class="btn btn-default btn" ng-click="delete();"><i class="glyphicon glyphicon-trash"></i></button>
</div></td>
</tr>
</tbody>
这是HTML页面的一部分:
我的JSON数据格式:
$scope.userList = {"InvoiceHeaders":[
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
}
]。 }
您的JSON无效,请将其更改为,
{
"InvoiceHeaders": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
}
]
}
DEMO
var myApp = angular.module('testApp',[]); myApp.controller('myCtrl',function($scope){ $scope.userList = { "InvoiceHeaders": [ { "name": "Tiger Nixon", "position": "System Architect", "salary": "$320,800", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" }, { "name": "Garrett Winters", "position": "Accountant", "salary": "$170,750", "start_date": "2011/07/25", "office": "Tokyo", "extn": "8422" } ] } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="testApp" ng-controller="myCtrl"> <ul ng-repeat="user in userList.InvoiceHeaders"> <li>{{user.name}}</li> <li>{{user.position}}</li> <li>{{user.office}}</li> <td> </ul> </body>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.