关于select下拉框加载出现空白项

乐尚

js代码如下：

.controller('DashCtrl', function($scope,$ionicLoading,$timeout) {
       
        $scope.data = {
                currentProvinceId: 0,
                currentCityId: 0,
                currentAreaId: 0
            };
       
        $scope.queryArea = function(areaId,selectId){
                var html="<option value=''>--请选择--</option>";
                if(areaId !=''){
                        $("#"+selectId).html("");
                        var options = {
                   url : device.serviceip+'/sdbattery/interceptor/requestInterceptor!requestMain.action',
                   param: 'type=query&sqlName=operatParam.queryArea&areaId='+areaId,
                   type:'AjaxACode',
                   success:function(data) {
                           var resultData = data.rValue;
                           if(resultData!=null && resultData.length>0){
                                                for(var i=0;i<resultData.length;i++){
                                                        html+="<option value='"+resultData[i].areaId+"'>"+resultData[i].name+"</option>"
                                                }
                                                $("#"+selectId).html(html);
                                        }
                          
                        },
                       error:function(a,b) {
                               sysop.sysMakeText("服务端接口异常，请联系管理员！");
                       }
                   };
                        new http_oper(options);
                }else{
                        $("#"+selectId).html(html);
                }
               
        }
       
        $scope.changeProvince = function(){
                var html="<option value=''>--请选择--</option>";
                $("#reginId_query").html(html);
                $("#townId_query").html(html);
                var areaId = $("#provinceId_query").val();
                $scope.data.currentProvinceId = areaId;
                if(areaId !=''){
                        $("#cityId_query").html("");
                        var options = {
                   url : device.serviceip+'/sdbattery/interceptor/requestInterceptor!requestMain.action',
                   param: 'type=query&sqlName=operatParam.queryArea&areaId='+areaId,
                   type:'AjaxACode',
                   success:function(data) {
                           var resultData = data.rValue;
                           if(resultData!=null && resultData.length>0){
                                                for(var i=0;i<resultData.length;i++){
                                                        html+="<option value='"+resultData[i].areaId+"'>"+resultData[i].name+"</option>"
                                                }
                                                $("#cityId_query").html(html);
                                        }
                          
                        },
                       error:function(a,b) {
                               sysop.sysMakeText("服务端接口异常，请联系管理员！");
                       }
                   };
                        new http_oper(options);
                }else{
                        $("#cityId_query").html(html);
                }
        }
       
        $scope.changeCity = function(){
                var html="<option value=''>--请选择--</option>";
                $("#townId_query").html(html);
                var areaId = $("#cityId_query").val();
                $scope.data.currentCityId = areaId;
                if(areaId !=''){
                        $("#reginId_query").html("");
                        var options = {
                   url : device.serviceip+'/sdbattery/interceptor/requestInterceptor!requestMain.action',
                   param: 'type=query&sqlName=operatParam.queryArea&areaId='+areaId,
                   type:'AjaxACode',
                   success:function(data) {
                           var resultData = data.rValue;
                           if(resultData!=null && resultData.length>0){
                                                for(var i=0;i<resultData.length;i++){
                                                        html+="<option value='"+resultData[i].areaId+"'>"+resultData[i].name+"</option>"
                                                }
                                                $("#reginId_query").html(html);
                                        }
                          
                        },
                       error:function(a,b) {
                               sysop.sysMakeText("服务端接口异常，请联系管理员！");
                       }
                   };
                        new http_oper(options);
                }else{
                        $("#reginId_query").html(html);
                }
        }
       
        $scope.changeRegin = function(){
                var html="<option value=''>--请选择--</option>";
                var areaId = $("#reginId_query").val();
                $scope.data.currentAreaId = areaId;
                if(areaId !=''){
                        $("#townId_query").html("");
                        var options = {
                   url : device.serviceip+'/sdbattery/interceptor/requestInterceptor!requestMain.action',
                   param: 'type=query&sqlName=operatParam.queryArea&areaId='+areaId,
                   type:'AjaxACode',
                   success:function(data) {
                           var resultData = data.rValue;
                           alert("resultData:"+resultData);
                           if(resultData!=null && resultData.length>0 && resultData!=""){
                                                for(var i=0;i<resultData.length;i++){
                                                        html+="<option value='"+resultData[i].areaId+"'>"+resultData[i].name+"</option>"
                                                }
                                                $("#townId_query").html(html);
                                        }else{
                                                $("#townId_query").html(html);
                                        }
                          
                        },
                       error:function(a,b) {
                               sysop.sysMakeText("服务端接口异常，请联系管理员！");
                       }
                   };
                        new http_oper(options);
                }else{
                        $("#townId_query").html(html);
                }
        }
       
        document.addEventListener("deviceready", onDeviceReady, false);
           function onDeviceReady() {
                   $scope.queryArea('0','provinceId_query');   
                   $scope.queryArea('','cityId_query');   
                   $scope.queryArea('','reginId_query');   
           };
})


html代码如下：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<ion-view view-title="机房信息查询">
    <ion-header-bar align-title="center" class="bar-balanced">
        <h1 class="title">机房信息查询</h1>
        <button class="button" >查询</button>
    </ion-header-bar>

  <ion-content class="padding">

    <div style="background-color:rgba(250, 250, 250, 1);">
                <label class="item item-input item-select">
                    <div>
                                省份
                                <select id="provinceId_query" ng-change="changeProvince()" ng-model="data.currentProvinceId">
                                </select>
                        </div>
                </label>
               
                <label class="item item-input item-select">
                        <div>
                                市级
                                <select id="cityId_query" ng-change="changeCity()" ng-model="data.currentCityId">
                                </select>
                        </div>
                </label>
               
                <label class="item item-input item-select">
                        <div>
                                区县
                                <select id="reginId_query" ng-change="changeRegin()" ng-model="data.currentAreaId">
                                </select>
                        </div>
                </label>
               
                <label class="item item-input item-select">
                        <div>
                                区镇
                                <select id="townId_query">
                                        <option>--请选择--</option>
                                </select>
                        </div>
                </label>
               
                <label class="item item-input">
                        <span class="input-label">机房编码</span>
                        <input type="text" placeholder="" id="roomCode_query" style="background-color:#e7e7e7;">
                </label>
                <label class="item item-input">
                        <span class="input-label">机房名称</span>
                        <input type="password" placeholder="" id="roomName_query" style="background-color:#e7e7e7;">
                </label>
               
        </div>

     <ion-infinite-scroll
         ng-if="moreDataCanBeLoaded()"
         on-infinite="loadMore()"
         immediate-check ="false"
         distance="2%">
     </ion-infinite-scroll>
  </ion-content>
</ion-view>

运行之后市级和区县的下拉框出现空白项，包含两个选项：一个请选择，一个空白的。请大神帮一下忙，鄙人刚入手不明白，网上找了一下说是ng-model的问题，但是不知道怎么改一下，所以没有解决。望知道的前辈助一臂之力。万分感谢。

ionicwang

你绑定数据的方式不要用以前的dom操作

用angualrjs的 $scope绑定数据，然后循环


$scope改变数据后结合  $apply实现数据重新绑定

乐尚

ionicwang 发表于 2016-1-5 11:33
你绑定数据的方式不要用以前的dom操作

用angualrjs的 $scope绑定数据，然后循环

我先试着改一下，谢谢！有问题还得再询问你一下，麻烦你。

ionicwang

乐尚 发表于 2016-1-5 11:37
我先试着改一下，谢谢！有问题还得再询问你一下，麻烦你。

好的 到时候发帖 我看见会回复的，平时也经常来学习

乐尚

ionicwang 发表于 2016-1-5 22:08
好的 到时候发帖 我看见会回复的，平时也经常来学习

你好！我现在在跳转页面的时候遇到问题了，报了state  undefined的错误。我把代码引入state的代码给你看一下，麻烦你给我指点一下，谢谢！
$scope.queryRoomInfo = function(){
                var provinceId = $scope.data.currentProvinceId;
                var cityId = $scope.data.currentCityId;
                var reginId = $scope.data.currentAreaId;
                var townId = $scope.data.currentTownId;
                var roomCode = $("#roomCode_query").val();
                var roomName = $("#roomName_query").val();
               
                var inputDatas = new Object;
                inputDatas.provinceId = provinceId;
                inputDatas.cityId = cityId;
                inputDatas.reginId = reginId;
                inputDatas.townId = townId;
                inputDatas.roomCode = roomCode;
                inputDatas.roomName = roomName;
               
                $state.go('tab.room',{param:inputDatas});  
               
        }

定义state的代码如下：
$stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'tab/tabs.html',
    controller: 'TabCtrl'       
  })

  // Each tab has its own nav history stack:

   .state('tab.main', {
    url: '/main',
    views: {
      'tab-main': {
        templateUrl: 'main.htm',
        controller: 'MainCtrl'
      }
    }
  })

  
  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'tab/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'tab/tab-chats.html',
          controller: 'ChatsCtrl'
        }
      }
    })
    .state('tab.chat-detail', {
      url: '/chats/:chatId',
      views: {
        'tab-chats': {
          templateUrl: 'tab/chat-detail.html',
          controller: 'ChatDetailCtrl'
        }
      }
    })

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'tab/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  })
  
  .state('tab.room',{
          url: '/room',
          views: {
                  'tab-room':{
                          templateUrl: 'tab/tab-room.html',
                      controller: 'RoomInfoCtrl'
                  }
          }
  });