如何解決在選擇離子與SQLite的空選項？

Question

我有問題，作出有關在選擇選項離子應用程序時只顯示黑屏就像我下面的截圖：

它我的控制器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 

}) 

}]) 

對於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> 

我該如何解決它？它的my full example code在上面的github上

Answer 1

您需要將您的選擇型號指向您想要作爲初始選擇顯示的ng-options列表中的任何對象。所以，如果你想在你的$scope.dolltype模型中的第一個選項將顯示，當你的頁面加載後，你會放：

$scope.dash2 = $scope.dolltype[0]; 

DEMO

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]; 

}); 

編輯

嘗試把你的模型定義中您的then()功能：

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]; 
    }); 

此外，我不認爲你真的需要在你的控制器中使用$q服務。 $http服務已經返回承諾，因此您不需要使用$q.defer()創建新服務。因爲使用SQLite插件我的應用程序離線存儲之後從服務器獲取數據的同時與

$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) 
    };