欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

angularjs~中的下拉框,以及数据的回显,并且还可以实现下拉框的功能 博客分类: 前端笔记 下拉框 

程序员文章站 2024-02-18 12:44:16
...

两种实现方式

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

<div class="input-select" >
  <select ng-model="areaId" class="js-input-select-title" ng-change="queryCityByQuYu()">
     <option value="--请选择区域--">--请选择区域--</option>
     <option ng-repeat="areaValueViewList in areaValueViewLists" ng-value="areaValueViewList.id">{{areaValueViewList.value}}</option>
  </select>
</div> 
<div class="input-select">
   <select ng-model="cityIds" class="js-input-select-title">
      <option value="--请选择城市--">--请选择城市--</option>
      <option ng-repeat="platformCustomerDictionaryValue in platformCustomerDictionaryValues" value="{{platformCustomerDictionaryValue.id}}">{{platformCustomerDictionaryValue.value}}</option>
   </select>
</div>
    $scope.areaId="--请选择区域--"; 
    $scope.cityIds="--请选择城市--"; 
    //通过区域查询对应的城市--创建时
    $scope.queryCityByQuYu = function()
    {
    	if($scope.areaId == undefined || $scope.areaId == "undefined" || $scope.areaId =="--请选择区域--")
    	{
    		return;
    	}
    }

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

     回显代码,如下

<div class="input-select">
     <select ng-model="upAreaId" class="js-input-select-title" ng-change="queryCityByQuYuBj()">
          <option ng-repeat="areaValueViewList in areaValueViewLists" value="{{areaValueViewList.id}}" ng-selected="upAreaId=={{areaValueViewList.id}}">{{areaValueViewList.value}}</option>
    </select>
</div> 
<div class="input-select">
    <select ng-model="upCityId" class="js-input-select-title" >
        <option ng-show="upCityId==upCityIdTwo" ng-value="upCityId" ng-selected="true">{{upCityName}}</option>
        <option ng-repeat="cityValueViewList in cityListBj" value="{{cityValueViewList.id}}" >{{cityValueViewList.value}}</option>
    </select>
</div>

==>upCityId==upCityIdTwo是用来显示原本的数据是否消失
 

 

相关标签: 下拉框