angularjs中的下拉框,以及数据的回显,并且还可以实现下拉框的功能

时间:2022-11-21 18:05:43

两种实现方式

     一 ,第一种就是使用select来实现下拉框,如下

Java代码   angularjs中的下拉框,以及数据的回显,并且还可以实现下拉框的功能
  1. <div class="input-select" >  
  2.   <select ng-model="areaId" class="js-input-select-title" ng-change="queryCityByQuYu()">  
  3.      <option value="--请选择区域--">--请选择区域--</option>  
  4.      <option ng-repeat="areaValueViewList in areaValueViewLists" ng-value="areaValueViewList.id">{{areaValueViewList.value}}</option>  
  5.   </select>  
  6. </div>   
  7. <div class="input-select">  
  8.    <select ng-model="cityIds" class="js-input-select-title">  
  9.       <option value="--请选择城市--">--请选择城市--</option>  
  10.       <option ng-repeat="platformCustomerDictionaryValue in platformCustomerDictionaryValues" value="{{platformCustomerDictionaryValue.id}}">{{platformCustomerDictionaryValue.value}}</option>  
  11.    </select>  
  12. </div>  
  13.     $scope.areaId="--请选择区域--";   
  14.     $scope.cityIds="--请选择城市--";   
  15.     //通过区域查询对应的城市--创建时  
  16.     $scope.queryCityByQuYu = function()  
  17.     {  
  18.         if($scope.areaId == undefined || $scope.areaId == "undefined" || $scope.areaId =="--请选择区域--")  
  19.         {  
  20.             return;  
  21.         }  
  22.     }  

 其中下拉框选中了,将会把值付给ng-model,这样就可以通过ng-change方法来实现,

伦理片 http://www.dotdy.com/ 

Java代码   angularjs中的下拉框,以及数据的回显,并且还可以实现下拉框的功能
  1. <div class="input-select">  
  2.      <select ng-model="upAreaId" class="js-input-select-title" ng-change="queryCityByQuYuBj()">  
  3.           <option ng-repeat="areaValueViewList in areaValueViewLists" value="{{areaValueViewList.id}}" ng-selected="upAreaId=={{areaValueViewList.id}}">{{areaValueViewList.value}}</option>  
  4.     </select>  
  5. </div>   
  6. <div class="input-select">  
  7.     <select ng-model="upCityId" class="js-input-select-title" >  
  8.         <option ng-show="upCityId==upCityIdTwo" ng-value="upCityId" ng-selected="true">{{upCityName}}</option>  
  9.         <option ng-repeat="cityValueViewList in cityListBj" value="{{cityValueViewList.id}}" >{{cityValueViewList.value}}</option>  
  10.     </select>  
  11. </div>  
  12.   
  13. ==>upCityId==upCityIdTwo是用来显示原本的数据是否消失