Javascript AngularJS,使用Rest服务,该服务使用数组响应<;对象>。如何在表格中显示这一点?
如何放置此Rest Json响应:Javascript AngularJS,使用Rest服务,该服务使用数组响应<;对象>。如何在表格中显示这一点?,javascript,angularjs,rest,html-table,response,Javascript,Angularjs,Rest,Html Table,Response,如何放置此Rest Json响应: [ { "Attribute1": 1, "Attribute2": "1", "Attribute3": "example", "Attribute4": "12345", "Attribute5": "example example", "Attribute6: "20/10/2015", "Attribute7": "2015-11-13" },
[
{
"Attribute1": 1,
"Attribute2": "1",
"Attribute3": "example",
"Attribute4": "12345",
"Attribute5": "example example",
"Attribute6: "20/10/2015",
"Attribute7": "2015-11-13"
},
{
"Attribute1": 7,
"Attribute2": "5",
"Attribute3": "example",
"Attribute4": "12345",
"Attribute5": "example example",
"Attribute6: "20/10/2015",
"Attribute7": "2015-11-13"
},
{
"Attribute1": 2,
"Attribute2": "3",
"Attribute3": "example",
"Attribute4": "12345",
"Attribute5": "example example",
"Attribute6: "20/10/2015",
"Attribute7": "2015-11-13"
}
]
我通过调用angularjscustom.js中此函数中的http.get获得:
$scope.getCalls = function() {
$scope.ObjectList = [$http.get("http://localhost:8080/test/test2/test4?uname=" + scope.uname + "&passwort=" +scope.password)];
此index.html文件中的表:
<table class="table table-hover table-striped">
<thead>
<tr>
<th> Attribut1 </th>
<th> Attribut2 </th>
<th> Attribut3 </th>
<th> Attribut4 </th>
<th> Attribut5 </th>
<th> Attribut6 </th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="Object in ObjectList">
<td>{{ Object.Attribut1}}</td>
<td>{{ Object.Attribut2 }}</td>
<td>{{ Object.Attribut3 }}</td>
<td>{{ Object.Attribut4 }}</td>
<td>{{ Object.Attribut5 }}</td>
<td>{{ Object.Attribut6 }}</td>
<td>{{ Object.Attribut7 }}</td>
</tr>
</tbody>
</table>
属性1
属性2
属性3
属性4
属性5
属性6
{{Object.attribute1}}
{{Object.attribute2}
{{Object.attribute3}
{{Object.attribute4}
{{Object.attribute5}}
{{Object.attribute6}
{{Object.attribute7}
此外,我还希望能够单击复选框以获取对属性1的引用,例如。。我想不出怎么做。也许有人能给我指路?我没有AngularJs或Javascript经验。您需要模块和控制器
var app = angular.module("example",[]);
app.controller("sampleController","$scope","$http",
function($scope,$http){
$http.get("/api/some/getList")
.success(function(data){
//data properties: firstName , lastName
//add is check property for checkbox
angular.forEach(data,function(item){
item.isCheck = false;
});
$scope.items = data;
})
.error(function(exp){
alert(exp);
});
$scope.selectedItems = [];
$scope.checkChange = function(item){
item.isCheck = !item.isCheck;
}
$scope.getSelected = function(){
var selectedItems = [];
angular.forEach($scope.items,function(item){
if(item.isCheck){
selectedItems.push(item);
}
});
//you have checked items in selectedItems variable.
}
}]);
html页面:
<table>
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items track by $index">
<td>
<input type="checkbox" ng-model="item.isCheck" ng-change="checkChange(item)"/>
</td>
<td ng-bind="item.firstName"></td>
<td ng-bind="item.lastName"></td>
</tr>
</tbody>
</table>
名字
姓