How to fix about empty option in select in Ionic if using sqlite plugin?


#1

I have a problem when making an ionic app about option in select just show blank screen because get simultaneously data from server for once time and save to sqlite as offline storage 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 rid of it? So I can get a selected option as the first child of select element after first loading. Its my full example code


#2

Have you at any point defined a slected element after the initial $http JSON call?

Selected element must be set as that:

<option selected>Green</option>

if you want it to be shown after it’s dynamically populated.


#3

I also miss a selected or default in ng-options…

You can set your model before showing the form to whatever value you need. It’s an alternative to set options and set one as selected, as @Gajotres suggested


#4

@Gajotres thanks for your suggestion but the chart cannot get response when page loads first time with initial selected option. I am using this plugin for my chart. I already updated my repo for fixed initial selected option.

How I can fix it?

Thanks before


#5

Could anyone help me to solve this problem?