PhoneGap中文网

标题: 关于select下拉框加载出现空白项 [打印本页]

作者: 乐尚 时间: 2016-1-5 10:15
标题: 关于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 时间: 2016-1-5 11:33
你绑定数据的方式不要用以前的dom操作

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

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

作者: 乐尚 时间: 2016-1-5 11:37

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

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

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

作者: ionicwang 时间: 2016-1-5 22:08

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

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

作者: 乐尚 时间: 2016-1-7 10:55

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

欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/)