我在制作关于图表的离子应用程序时遇到问题，当页面第一次加载时，“项目 1”和“纽约”作为初始选择选项时无法获得响应，如下面的屏幕截图：
控制器.js
.controller('DashCtrl', ['$scope', '$q', '$http', '$timeout', '$interval', '$state', '$filter', '$location', 'DOLLTYPE', 'REGION', function($scope, $q, $http, $timeout, $interval, $state, $filter, $location, DOLLTYPE, REGION) {
$http
.get('js/data2.json')
.then(function(region) {
var i = region.length -1;
for (i; i >= 0; i--) {
REGION.add(region[i]);
};
})
.catch(function(error){
console.log('Error fetching region data: ', error)
})
$http
.get('js/data.json')
.then(function(result) {
var i = result.length -1;
for (i; i >= 0; i--) {
DOLLTYPE.add(result[i]);
};
})
.catch(function(error){
console.log('Error fetching doll data: ', error)
})
$scope.title = "Dashboard";
$scope.dash = [];
$scope.datas = [];
$scope.avg = [];
$scope.avgy = [];
$scope.data = [[]];
$scope.labels = [[]];
$scope.date = [];
$scope.place = [];
$scope.ayv = [];
$scope.dolltype = [];
DOLLTYPE
.all()
.then(function(dolltype){
$scope.dolltype = dolltype;
$scope.dash2 = $scope.dolltype[0];
});
$scope.regiontype = [];
REGION
.all()
.then(function(regiontype){
$scope.regiontype = regiontype;
$scope.dash1 = $scope.regiontype[0];
})
$scope.change = function(dash1) {
$scope.place = dash1;
}
$scope.change2 = function(dash2) {
$scope.doll= dash2.id;
}
$scope.place.name = 'Please select';
$scope.$watchCollection('[place, doll]', function(newVal, oldVal) {
$scope.colours = [
{ // Blue
fillColor: 'rgba(148,159,177,0)',
strokeColor: 'rgba(47,64,200,1)',
pointColor: 'rgba(67,43,177,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(148,159,177,0.8)'
},
{ // Red
fillColor: 'rgba(77,83,96,0)',
strokeColor: 'rgba(200,15,9,1)',
pointColor: 'rgba(190,50,11,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(77,83,96,1)'
},
{ // Green
fillColor: 'rgba(77,83,96,0)',
strokeColor: 'rgba(18,177, 26,1)',
pointColor: 'rgba(80,200,11,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(77,83,96,1)'
}
];
$http.get('js/data4.json').success(function(result) {
var deferred = $q.defer();
$scope.dash.msg = result.message;
$scope.prices = result.data;
deferred.resolve($scope.prices);
angular.forEach($scope.prices,function(value,index){
var values = {
value : value.value,
date : new Date(value.created_at.replace(/-/g,"/"))
};
$scope.datas.push(values.value);
$scope.dash.price = $scope.datas[2];
$scope.date.push($filter('date')(values.date,'dd-MMM'));
$scope.date.splice(2);
return deferred.promise;
})}).error(function(data, status) {
console.error('Error', status, data);
}); //End get price value
$http.get('js/data5.json').success(function(result) {
$scope.averageprice = result.data;
angular.forEach($scope.averageprice,function(value,index){
var avgvalue = {
average: value.average,
date : new Date(value.created_at.replace(/-/g,"/"))
};
console.log (avgvalue);
$scope.avg.push(avgvalue.average);
})}).error(function(data, status) {
console.error('Error', status, data);
}); //End get average price value
var deferred = $q.defer();
$http.get('js/data3.json').success(function(result) {
$scope.averageyearprice = result.data;
deferred.resolve($scope.averageyearprice);
console.log ($scope.averageyearprice);
$scope.avgy.push($scope.averageyearprice.yearly_average);
return deferred.promise;
}).error(function(data, status) {
}); //End get average year price value
$scope.data[0] = $scope.datas;
$scope.data[1] = $scope.avg;
$scope.data[2] = $scope.avgy;
$scope.labels = $scope.date;
console.log ($scope.data[0]);
$scope.series = [$scope.place.name, 'All (Average)', 'All (YTD Year)'];
console.log ($scope.series); // Add information for the hover/touch effect
})
}])
HTML 模板
<ion-view cache-view="false" view-title="{{title}}">
<ion-nav-bar class="nav-title-slide-ios7 bar-assertive"></ion-nav-bar>
<ion-content class="has-header">
<div class="list">
<div class="row item">
<div class="col text-left assertive"> <select name='options' ng-model="dash2" ng-change="change2(dash2)" ng-options="DOLLtype as DOLLtype.name for DOLLtype in dolltype">
</select></div>
<div class="col text-right assertive"> <select name='options' ng-model="dash1" ng-change="change(dash1)" ng-options="REGIONtype as REGIONtype.name for REGIONtype in regiontype">
</select></div>
</div>
<div class="row item">
<div class="col">Current Price</div>
<div class="col text-right assertive">{{dash.price}} %</div>
</div>
</br>
<div class="row item" id="container">
<div class="col text-center">
<p>{{dash.msg}}</p>
<canvas id="line" class="chart chart-line" data="data" labels="labels" series='series' height="100" legend="true" colours="colours"></canvas>
</div>
</div>
</ion-content>
</ion-view>