Angularjs 从JSON使用ng repeat创建表
我刚刚开始在我的项目中使用Angular。手头的任务是,我需要从JSON生成一个表。我可以通过硬编码来实现这一点,但是项目发生了变化,现在我需要使用JSON。我想用ng重复。我的数据结构是一个包含嵌套对象的对象数组,这些对象表示业务和时间。我有了奇怪的行为,我想知道是不是我的数据结构造成的 我创作了一把小提琴。如有任何建议,将不胜感激 我的数据结构如下所示:Angularjs 从JSON使用ng repeat创建表,angularjs,ng-repeat,Angularjs,Ng Repeat,我刚刚开始在我的项目中使用Angular。手头的任务是,我需要从JSON生成一个表。我可以通过硬编码来实现这一点,但是项目发生了变化,现在我需要使用JSON。我想用ng重复。我的数据结构是一个包含嵌套对象的对象数组,这些对象表示业务和时间。我有了奇怪的行为,我想知道是不是我的数据结构造成的 我创作了一把小提琴。如有任何建议,将不胜感激 我的数据结构如下所示: var dept = { sales : { startTime : "", endTime : "" }, service : { st
var dept = {
sales : { startTime : "", endTime : "" },
service : { startTime : "", endTime : "" },
accounting : { startTime : "", endTime : "" },
parts : { startTime : "", endTime : "" },
bodyShop : { startTime : "", endTime : "" },
other : { startTime : "", endTime : "" },
var hours = [
{
"name" : "Monday",
"hours": {
"sales" : { startTime : "5", endTime : "6" },
"service" : { startTime : "2", endTime : "3" },
"accounting" : { startTime : "4", endTime : "6" },
"parts" : { startTime : "10", endTime : "11" },
"bodyShop" : { startTime : "3", endTime : "8" },
"other" : { startTime : "a", endTime : "b" }
}
},
{
"name" : "Tuesday",
"hours": {
"sales" : { startTime : "5", endTime : "6" },
"service" : { startTime : "2", endTime : "3" },
"accounting" : { startTime : "4", endTime : "6" },
"parts" : { startTime : "10", endTime : "11"},
"bodyShop" : { startTime : "3", endTime : "8" },
"other" : { startTime : "a", endTime : "b" }
}
}
];
var mockDataForThisTest = "json=" + encodeURI(JSON.stringify(hours));
var app = angular.module('myApp', []);
function businessHours($scope, $http) {
$scope.schedule = [];
$scope.loadHours = function() {
var httpRequest = $http({
method: 'POST',
url: '/echo/json/',
data: mockDataForThisTest
}).success(function(data, status) {
console.log(data);
$scope.schedule = data;
});
};
}
});
对象嵌套在数组中,每个索引表示一周中的一天。例如,索引1是星期一
<tr ng-repeat="hours in businessHours">
<td>Monday</td>
<td>{{hours[0].startTime}}</td>
<td>{{hours[0].endTime}}</td>
<td>{{hours[0].startTime}}</td>
<td>{{hours[0].endTime}}</td>
<td>{{hours[0].startTime}}</td>
<td>{{hours[0].endTime}}</td>
</tr>
您可以尝试以下方法:
var dept = {
sales : { startTime : "", endTime : "" },
service : { startTime : "", endTime : "" },
accounting : { startTime : "", endTime : "" },
parts : { startTime : "", endTime : "" },
bodyShop : { startTime : "", endTime : "" },
other : { startTime : "", endTime : "" },
var hours = [
{
"name" : "Monday",
"hours": {
"sales" : { startTime : "5", endTime : "6" },
"service" : { startTime : "2", endTime : "3" },
"accounting" : { startTime : "4", endTime : "6" },
"parts" : { startTime : "10", endTime : "11" },
"bodyShop" : { startTime : "3", endTime : "8" },
"other" : { startTime : "a", endTime : "b" }
}
},
{
"name" : "Tuesday",
"hours": {
"sales" : { startTime : "5", endTime : "6" },
"service" : { startTime : "2", endTime : "3" },
"accounting" : { startTime : "4", endTime : "6" },
"parts" : { startTime : "10", endTime : "11"},
"bodyShop" : { startTime : "3", endTime : "8" },
"other" : { startTime : "a", endTime : "b" }
}
}
];
var mockDataForThisTest = "json=" + encodeURI(JSON.stringify(hours));
var app = angular.module('myApp', []);
function businessHours($scope, $http) {
$scope.schedule = [];
$scope.loadHours = function() {
var httpRequest = $http({
method: 'POST',
url: '/echo/json/',
data: mockDataForThisTest
}).success(function(data, status) {
console.log(data);
$scope.schedule = data;
});
};
}
与:
<div ng-app="myApp">
<div ng-controller="businessHours">
<p> Click <a ng-click="loadHours()">here</a> to load data.</p>
<table>
<tr>
<th></th>
<th style="vertical-align:top" scope="col" colspan="2">Sales</th>
<th style="vertical-align:top" scope="col" colspan="2" >Service</th>
<th style="vertical-align:top" scope="col" colspan="2">Parts</th>
<th style="vertical-align:top" scope="col" colspan="2">Accounting</th>
<th style="vertical-align:top" scope="col" colspan="2">Body Shop</th>
<th style="vertical-align:top" scope="col" colspan="2" >Other</th>
</tr>
<tr ng-repeat="day in schedule">
<td>{{day.name}}</td>
<td>{{day.hours.sales.startTime}} - {{day.hours.sales.endTime}}</td>
<td>{{day.hours.service.startTime}} - {{day.hours.service.endTime}}</td>
<td>{{day.hours.accounting.startTime}} - {{day.hours.accounting.endTime}}</td>
<td>{{day.hours.parts.startTime}} - {{day.hours.parts.endTime}}</td>
<td>{{day.hours.bodyShop.startTime}} - {{day.hours.bodyShop.endTime}}</td>
<td>{{day.hours.other.startTime}} - {{day.hours.other.endTime}}</td>
</tr>
</table>
</div>
单击您可以尝试以下方法:
var dept = {
sales : { startTime : "", endTime : "" },
service : { startTime : "", endTime : "" },
accounting : { startTime : "", endTime : "" },
parts : { startTime : "", endTime : "" },
bodyShop : { startTime : "", endTime : "" },
other : { startTime : "", endTime : "" },
var hours = [
{
"name" : "Monday",
"hours": {
"sales" : { startTime : "5", endTime : "6" },
"service" : { startTime : "2", endTime : "3" },
"accounting" : { startTime : "4", endTime : "6" },
"parts" : { startTime : "10", endTime : "11" },
"bodyShop" : { startTime : "3", endTime : "8" },
"other" : { startTime : "a", endTime : "b" }
}
},
{
"name" : "Tuesday",
"hours": {
"sales" : { startTime : "5", endTime : "6" },
"service" : { startTime : "2", endTime : "3" },
"accounting" : { startTime : "4", endTime : "6" },
"parts" : { startTime : "10", endTime : "11"},
"bodyShop" : { startTime : "3", endTime : "8" },
"other" : { startTime : "a", endTime : "b" }
}
}
];
var mockDataForThisTest = "json=" + encodeURI(JSON.stringify(hours));
var app = angular.module('myApp', []);
function businessHours($scope, $http) {
$scope.schedule = [];
$scope.loadHours = function() {
var httpRequest = $http({
method: 'POST',
url: '/echo/json/',
data: mockDataForThisTest
}).success(function(data, status) {
console.log(data);
$scope.schedule = data;
});
};
}
与:
<div ng-app="myApp">
<div ng-controller="businessHours">
<p> Click <a ng-click="loadHours()">here</a> to load data.</p>
<table>
<tr>
<th></th>
<th style="vertical-align:top" scope="col" colspan="2">Sales</th>
<th style="vertical-align:top" scope="col" colspan="2" >Service</th>
<th style="vertical-align:top" scope="col" colspan="2">Parts</th>
<th style="vertical-align:top" scope="col" colspan="2">Accounting</th>
<th style="vertical-align:top" scope="col" colspan="2">Body Shop</th>
<th style="vertical-align:top" scope="col" colspan="2" >Other</th>
</tr>
<tr ng-repeat="day in schedule">
<td>{{day.name}}</td>
<td>{{day.hours.sales.startTime}} - {{day.hours.sales.endTime}}</td>
<td>{{day.hours.service.startTime}} - {{day.hours.service.endTime}}</td>
<td>{{day.hours.accounting.startTime}} - {{day.hours.accounting.endTime}}</td>
<td>{{day.hours.parts.startTime}} - {{day.hours.parts.endTime}}</td>
<td>{{day.hours.bodyShop.startTime}} - {{day.hours.bodyShop.endTime}}</td>
<td>{{day.hours.other.startTime}} - {{day.hours.other.endTime}}</td>
</tr>
</table>
</div>
单击如果您想从JSON中获得有序数据,则必须使用数组作为核心结构,而不是对象。我很难从示例中可视化数据。你的意思是它会像下面这样吗?var dept={//monday sales:{startTime:“1”,endTime:“2”},service:{startTime:“1”,endTime:“2”},accounting:{startTime:“1”,endTime:“2”},parts:{//startTime:“3”,endTime:“4”},service:{startTime:“3”,endTime:“4”},accounting:{startTime:“3”,parts:{startTime:“3”,endTime:“4”}}}}@aemorales1是。这是正确的。如果您想让有序数据从JSON中出来,您必须使用数组作为核心结构,而不是对象。我很难从示例中可视化您的数据。你的意思是它会像下面这样吗?var dept={//monday sales:{startTime:“1”,endTime:“2”},service:{startTime:“1”,endTime:“2”},accounting:{startTime:“1”,endTime:“2”},parts:{//startTime:“3”,endTime:“4”},service:{startTime:“3”,endTime:“4”},accounting:{startTime:“3”,parts:{startTime:“3”,endTime:“4”}}}}@aemorales1是。那就对了。非常感谢。我明白我错在哪里了。我喜欢你打破这种重复的行为。非常感谢。我明白我错在哪里了。我喜欢你打破这种重复的行为。