Angularjs 角度函数默认数据在视图中出现错误
我正在与Angularjs和Firebase一起开发一个调度应用程序。出于某种原因，当我编写函数来设置默认数据时，日期的顺序是周一、周二、周三、周四、周五，但我的视图显示的日期为周五、周一、周四、周二、周三。不知道为什么或如何修复，其他一切似乎都很好。 app.jsAngularjs 角度函数默认数据在视图中出现错误,angularjs,function,scope,Angularjs,Function,Scope,我正在与Angularjs和Firebase一起开发一个调度应用程序。出于某种原因，当我编写函数来设置默认数据时，日期的顺序是周一、周二、周三、周四、周五，但我的视图显示的日期为周五、周一、周四、周二、周三。不知道为什么或如何修复，其他一切似乎都很好。 app.js angular.module('scheduleApp', ['firebase']) create our main controller and get access to firebase .cont
angular.module('scheduleApp', ['firebase'])
create our main controller and get access to firebase
.controller('mainController', function($scope, $firebase) {
var ref = new Firebase("https://xxxxx.firebaseio.com/days");
var fb = $firebase(ref);
var syncObject = fb.$asObject();
syncObject.$bindTo($scope, 'days');
$scope.reset = function() {
fb.$set({
monday: {
name: 'Monday',
slots: {
100: {
time: '10:00am',
booked: false
},
110: {
time: '11:00am',
booked: false
},
120: {
time: '12:00pm',
booked: false
},
130: {
time: '1:00pm',
booked: false
},
140: {
time: '2:00pm',
booked: false
},
150: {
time: '3:00pm',
booked: false
},
160: {
time: '4:00pm',
booked: false
},
170: {
time: '5:00pm',
booked: false
},
180: {
time: '6:00pm',
booked: false
}
}
},
tuesday: {
name: 'Tuesday',
slots: {
100: {
time: '10:00am',
booked: false
},
110: {
time: '11:00am',
booked: false
},
120: {
time: '12:00pm',
booked: false
},
130: {
time: '1:00pm',
booked: false
},
140: {
time: '2:00pm',
booked: false
},
150: {
time: '3:00pm',
booked: false
},
160: {
time: '4:00pm',
booked: false
},
170: {
time: '5:00pm',
booked: false
},
180: {
time: '6:00pm',
booked: false
}
}
},
wednesday: {
name: 'Wednesday',
slots: {
100: {
time: '10:00am',
booked: false
},
110: {
time: '11:00am',
booked: false
},
120: {
time: '12:00pm',
booked: false
},
130: {
time: '1:00pm',
booked: false
},
140: {
time: '2:00pm',
booked: false
},
150: {
time: '3:00pm',
booked: false
},
160: {
time: '4:00pm',
booked: false
},
170: {
time: '5:00pm',
booked: false
},
180: {
time: '6:00pm',
booked: false
}
}
},
thursday: {
name: 'Thursday',
slots: {
100: {
time: '10:00am',
booked: false
},
110: {
time: '11:00am',
booked: false
},
120: {
time: '12:00pm',
booked: false
},
130: {
time: '1:00pm',
booked: false
},
140: {
time: '2:00pm',
booked: false
},
150: {
time: '3:00pm',
booked: false
},
160: {
time: '4:00pm',
booked: false
},
170: {
time: '5:00pm',
booked: false
},
180: {
time: '6:00pm',
booked: false
}
}
},
friday: {
name: 'Friday',
slots: {
100: {
time: '10:00am',
booked: false
},
110: {
time: '11:00am',
booked: false
},
120: {
time: '12:00pm',
booked: false
},
130: {
time: '1:00pm',
booked: false
},
140: {
time: '2:00pm',
booked: false
},
150: {
time: '3:00pm',
booked: false
},
160: {
time: '4:00pm',
booked: false
},
170: {
time: '5:00pm',
booked: false
},
180: {
time: '6:00pm',
booked: false
}
}
}
});
};
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Scheduling</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.0/journal/bootstrap.m in.css">
<link rel="stylesheet" href="style.css">
<!-- JS -->
<!-- load Angular, Firebase, Firebase Angular Library, and custom app.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/1.1.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container" ng-app="scheduleApp" ng-controller="mainController">
<div class="page-header text-center">
<h1>Schedule City</h1>
</div>
<div class="row times">
<div class="col-xs-4 text-center" ng-repeat="day in days">
<h2>{{ day.name }} </h2>
<div class="time-slot" ng-repeat="slot in day.slots">
<input type="checkbox" id="{{ day.name }}-{{ $index}}" ng- model="slot.booked" ng-disabled="slot.booked">
<label for="{{ day.name }}-{{ $index }}">{{ slot.time }}<br>
<span ng-if="slot.booked">Booked</span>
<span ng-if="!slot.booked">Available</span>
</label>
</div>
</div>
</div>
<p class="text-center">
<a href="#" class="btn btn-primary" ng-click="reset()">Reset</a>
</p>
</div>
</body>
</html>
角度调度
计划城市
{{day.name}
{{slot.time}}
预定
可用
订单 monday: {
name: 'Monday',
order: '1',
slots: {
etc...
ng-repeat="day in days | orderBy:'order'"
ng-repeat="dayName in dayNames"
$scope.dayNames = ["monday", "tuesday"...];
ng-repeat="day in days | orderBy:'order'"
ng-repeat="dayName in dayNames"
ng-repeat="slot in days[dayName].slots"
<div class="col-xs-4 text-center" ng-repeat="dayName in dayNames">
<h2>{{ days[dayName].name }} </h2>
<div class="time-slot" ng-repeat="slot in days[dayName].slots">
<input type="checkbox" id="{{ days[dayName].name }}-{{ $index}}" ng- model="slot.booked" ng-disabled="slot.booked">
<label for="{{ days[dayName].name }}-{{ $index }}">{{ slot.time }}<br>
<span ng-if="slot.booked">Booked</span>
<span ng-if="!slot.booked">Available</span>
....
{{days[dayName].name}
{{slot.time}}
预定
可用
....