angular下拉框赋值问题

描述:在我们的项目中,会用到下拉框选项,比如后台系统,会有新增修改删除等操作;

当新增时,会输入一些内容,也会利用到下拉框,保存之后数据发送给后台;

当编辑时,需要把上次的内容带到本次中,下拉框需要展示出新增保存时所选择的那个,具体做法如下;

$scope.roleNameLIst= [

  {id:"sys009",name:"技术部管理员",age:18,address:"北京市昌平区"},

  {id:"sys008",name:"物业管理员",age:20,address:"北京市昌平区"},

  {id:"5c343c65d6544116bb8b7e1ca9fbf483",name:"test23",age:25,address:"北京市昌平区"},

];//虚拟数据

例如上次新增保存时,select选择的是id为2的那条数据{id:2,name:"ls",age:20,address:"北京市昌平区"},,此时编辑也是编辑这一条数据时

<select ng-init="type=null" ng-model="type" ng-options="m.id as m.name for m in roleNameLIst" ></select>

此时在dom结构里看到的数据为下图option的value为字符串的时候:

获取到值的时候,如果要显示第二条就绑定:$scope.type = $scope.roleNameLIst[1].id(或者是获取到的id,这里没有获取操作,所以直接进行的绑定)即可;

当option的value的值为数字number时:

获取到值的时候,如果要显示第二条就绑定:$scope.type = Number($scope.roleNameLIst[1].id)(当id为数字时,需要进行一下转换,确保与option的value格式相同,如果不同则显示不出想要的数据)即可;

时间: 2024-10-13 21:29:54

angular下拉框赋值问题的相关文章

mvc 下拉框赋值

以前使用WebForm变成时,下拉框传值只需直接在后台绑定代码就可以了.现在我们来看看在MVC中DropDownList是如果和接受从Controller传过来的值的. 第一种:使用DropDownList 控制器代码: public ActionResult Index() { //1.1查询YzSeriesEntity的数据 List<Model.YzSeriesEntity> seriesList = seriesBLL.LoadEnities().ToList(); //1.2将YzS

给前台的下拉框赋值

List<LabelValueBean> list = equipScrapDAO.getScrapTypeList(); public List<LabelValueBean> getScrapTypeList() throws SQLException {         List<LabelValueBean> list = new ArrayList<LabelValueBean>();         String sql = "sele

分公司下拉框赋值-从后台传到前端jsp

同事写的代码 学到了 但是脑子记不住 特此记录 后台: @RequestMapping(params = { "method=fun" }) protected ModelAndView fun(HttpServletRequest request) throws Exception { List<model> codes = new ArrayList<model>(); try { LoginUserVo userVo=getSessionLoginUser

MiniUi绑定mini-combobox下拉框

一:最先开始使用json字符串绑定combobox [{"id":1,"value":"是","text":"是"},{"id":0,"value":"否","text":"否"}] 然后我忘记json字符串的格式了,id属性没有加"" ,combobox一直绑定不上数据,而且请注意tex

JS年月日三级联动下拉框日期选择代码

原博客网址: http://www.cnblogs.com/gdcgy/p/5467742.html 由于工作中涉及到生日编辑资料编辑,年月日用上面网址案例:bug提示: 编辑生日栏的[年]或者[月],之前保存的具体的[日]就不显示啦,产品说不管编辑哪个数据,其他数据不变: 然后自己改了一下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

基于jquery扩展漂亮的下拉框——ComboBox

关于web前端自定义控件——ComboBox(下拉框),以往我在使用下拉框控件老是为了样式丑陋而烦恼,现在分享这个控件,希望有用的同仁们可以收藏,或进行二次修改,达到你想要的效果. 分解自定义下拉框: 1.创建构造函数,初始化赋值控件值. 2.绑定控件呈现在前台. 3.点击下拉框控件,展示下拉列表 4.点击触发下拉框控件,收起下拉列表. 5.点击下拉项触发事件. 代码如下: Html代码: 1 <b class="select_type"></b> css样式:

优化jeecg底层高级查询,支持bool值和下拉框查询

最近在用jeecg做项目,在使用高级查询的时候发现它不支持布尔值的查询以及列表的下拉框的查询,所以小编修改了底层代码,完善了高级查询,现在与大家一起分享.先上一张图给大家看一下修改前的高级查询. 它只支持了文本的查询以及日期格式的查询,很难满足在使用过程中的要求.所以小编把他的功能丰富了一下,下面把源码分享给大家. 首先先简单介绍一下jeecg高级查询的原理,一切的秘密都在DataGridTag这个标签类里面,在打开一个页面的时候,这个类会对页面的左右变迁进行初始化,以及对高级查询的页面进行构造

在ALV界面添加下拉框

1.在alv界面表单属性中设置 if wa_fieldcat-fieldname = 'YC_MARK'.              wa_fieldcat-edit = 'X'.              wa_fieldcat-drdn_field = 'DD_HANDLE'.              wa_fieldcat-drdn_hndl = '1'.         endif. 2.给下拉框赋值 LTH_LIST-HANDLE = '1' .   LTH_LIST-VALUE =

JavaScrip单选,下拉框,文本框取值赋值--【DRP】

代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co