`

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

阅读更多

两种实现方式

     一 ,第一种就是使用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是用来显示原本的数据是否消失
 

 

分享到:
评论

相关推荐

    Vue下拉框回显并默认选中随机问题

    Vue下拉框回显并默认选中随机问题通常指的是在使用Vue.js框架和ElementUI组件库开发前端页面时,遇到下拉框组件在数据回显时出现选择状态随机的问题。这一问题可能会导致用户体验下降,因为下拉框中的选项在多次刷新...

    解决layui 三级联动下拉框更新时回显的问题

    最近接触layui,比较简洁美观的一款ui,但也有很多小坑,记录一下实现省市区下拉三级联动更新回显的问题 &lt;&#37;--监听省份选择 --%&gt; form.on('select(uprovinceId)', function(data){ initCityList('change')...

    基于layui的下拉列表的数据回显方法

    本文将详细介绍如何使用layui框架来实现下拉列表的数据回显功能。 ### 基于layui的下拉列表数据回显 在介绍具体的数据回显方法之前,我们先来了解一下下拉列表的HTML结构和数据回显的基本概念。 #### 下拉列表的...

    解决element ui select下拉框不回显数据问题的解决

    解决Element UI的`el-select`下拉框不回显数据的问题,关键在于检查数据类型、数据结构以及数据加载的时机。通过调试和比对,找出问题的根源,针对性地进行修复。在实际开发中,保持良好的编程习惯,如正确处理数据...

    基于c#语言开发的下拉框多选功能

    总结来说,C#中实现下拉框多选功能主要涉及到`ListBox`控件的使用,设置其`SelectionMode`,填充数据,以及监听用户的选择变化。通过这些步骤,我们可以创建出一个功能完备且用户友好的多选下拉框组件。

    extjs 复选下拉框的例子

    通过对数据源的配置、样式的设计以及自定义类的使用,开发者可以轻松地创建出功能强大且外观美观的复选下拉框控件。掌握这一技巧对于提升Web应用程序的用户体验至关重要。 总之,ExtJS的复选下拉框不仅是一个简单的...

    下拉列表赋值和回显.txt

    所谓赋值是从数据库中获取数据循环遍历赋值给前端下拉列表选项,所谓回显是从选中或勾选父页面中的某行数据,回显到子页面中对应的下拉列表,且处于被选中状态。两个功能均已给出(给出的是前端代码,后端接口很简单...

    SSH2 三级联下拉框

    在这个“SSH2 三级联下拉框”的项目中,我们将探讨如何在SSH2框架中实现一个功能丰富的三级联动下拉列表框。 首先,Struts2作为前端控制器,负责处理HTTP请求并转发到相应的业务逻辑。它提供了一种灵活的Action机制...

    取得多个下拉框的值

    通过上述分析,我们可以看出这段代码的主要目的是统计具有相同名称的多个下拉框中特定值被选中的次数。这种方式适用于需要收集用户选择数据的应用场景,比如问卷调查、用户偏好设置等。同时,通过优化代码结构和逻辑...

    省市级三级联动js脚本,数据回显整合代码

    通过以上步骤和代码,我们可以实现一个完整的省市级三级联动效果。在实际应用中,需要根据实际数据结构和需求进行适当调整。同时,为了优化用户体验,还可以添加一些额外的功能,比如初始加载时显示提示信息,无数据...

    select2控件回显方法

    JavaScript 技术: select2控件选择多个数据,以及回显数据的方法 。

    AJAX 动态下拉框

    - **更新下拉框**:JavaScript接收到响应后,解析数据,更新下拉框选项,可以使用`innerHTML`属性或DOM操作方法如`appendChild()`来实现。 3. **Eclipse集成开发环境** Eclipse是流行的Java开发IDE,对于AJAX项目...

    微信小程序picker组件省市二级联动及其修改时进行回显

    结合`bindchange`事件和动态更新`range`属性,可以实现灵活的联动效果。同时,通过合理设置初始值,确保了用户在编辑时能看到之前的选择,提高了用户体验。在实际项目中,开发者可以根据具体需求对这些基础概念进行...

    extjs4 ComboBox 点击下拉框 出现grid效果

    ComboBox的默认行为是弹出一个包含选项的列表,而你想要实现的是当用户点击下拉按钮时,展示一个Grid,这样可以展示更多的信息并且支持更复杂的交互。这种自定义的行为需要对EXTJS4的事件处理和组件嵌套有深入的理解...

    复选框和下拉列表的提交和回显的实现方式

    ### 复选框和下拉列表的提交与...为了支持回显功能,还需要确保在Action类中提供相应的getter方法以及存储当前学生已选课程ID的数组。 以上是关于复选框和下拉列表的提交及回显的一些实现方式,希望对大家有所帮助。

    editableSelect可编辑搜索的下拉框插件

    3. **多选支持**:如果配置允许,`editableSelect`还可以实现多选功能,用户可以同时选择多个匹配项。 4. **自定义样式**:开发者可以通过CSS定制插件的外观,以适应不同的网站风格。 5. **事件监听**:提供丰富的...

    layui实现下拉复选功能的例子(包括数据的回显与上传)

    在上述文档中,提到了使用layui框架实现一个具有下拉复选功能的前端界面,该功能还包含了从后端数据库查询数据后回显在下拉复选框中,以及上传功能的实现。下面我将详细解释这些知识点。 ### 1. layui框架简介 ...

    Angular.JS中select下拉框设置value的方法

    总结来说,设置AngularJS中`select`下拉框的`value`,关键在于正确地使用`ngModel`和`ngRepeat`指令,将数据源中的属性映射到`option`的`value`属性上。同时,通过`ngModel`双向绑定,可以轻松地获取用户在下拉框中...

Global site tag (gtag.js) - Google Analytics