I have problem when making an ionic app about option in select just show blank screen like my screenshot below:
Its my controller js:
.controller('DashCtrl', ['$scope', '$q', '$http', '$timeout', '$interval', '$state', '$filter', '$location', 'DOLLTYPE', 'REGION', function($scope, $q, $http, $timeout, $interval, $state, $filter, $location, DOLLTYPE, REGION) {
var deferred = $q.defer();
$http.get('js/data2.json').success(function(result) {
var region = result;
console.log (region);
deferred.resolve(region);
for (var i = region.length - 1; i >= 0; i--) {
REGION.add(region[i]); console.log('success')};
return deferred.promise;
})
var deferred = $q.defer();
$http.get('js/data.json').success(function(result) {
var dolltype = result;
console.log (dolltype);
deferred.resolve(dolltype);
for (var i = dolltype.length - 1; i >= 0; i--) {
DOLLTYPE.add(dolltype[i]); console.log('success')};
return deferred.promise;
})
$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.regiontype = [];
REGION.all().then(function(regiontype){
$scope.regiontype=regiontype
})
$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
})
}])
For HTML Template:
<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>
How I can fix it? Its my full example code on github like above
You need to point your select model to whichever object in your ng-options list you want to be shown as the initial choice. So if you wanted the first option in your $scope.dolltype model to be displayed when your page loads you would put:
$scope.dash2 = $scope.dolltype[0];
app.controller('ctrl', function($scope){
$scope.dolltype = [
{
id: "1",
name: "Item 1",
basic_price: "7900000",
created_at: "2015-06-14 17:00:00",
updated_at: "-0001-11-30 00:00:00"
},
{
id: "2",
name: "Item 2",
basic_price: "11000000",
created_at: "2015-06-30 17:00:00",
updated_at: "-0001-11-30 00:00:00"
},
{
id: "3",
name: "Item 3",
basic_price: "9500000",
created_at: "2015-06-30 17:00:00",
updated_at: "-0001-11-30 00:00:00"
}
];
$scope.dash2 = $scope.dolltype[0];
});
EDIT
Try putting your model definition inside your then() function:
DOLLTYPE
.all()
.then(function(dolltype){
$scope.dolltype = dolltype;
$scope.dash2 = $scope.dolltype[0];
});
REGION
.all()
.then(function(regiontype){
$scope.regiontype = regiontype;
$scope.dash1 = $scope.regiontype[0];
});
Also, I don't think you really need to use the $q service in your controller. The $http service already returns a promise so you don't need to create a new one with $q.defer(). I think you could change it to something like this:
$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)
};