angularjs在select里生成option时出现<option value="? number:xxx ?" class=""></option>不能回显的解决办法

问题描述:

这段代码遍历时总会多一个<option value="? number:xxx ?" class=""></option>,而且点编辑后跳转到这个页面还不能回显

<select class="form-control" name="form.charttype" ng-model="form.charttype" ng-change="charttypeselector();">
    <option value="">请选择</option>
    <option value="new">新增</option>
    <option value="disabled" disabled>————————</option>
    <option value="{{ type.id }}" ng-repeat="type in charttypes">{{ type.name }}</option>
</select>

结果如下:


解决办法:

把你的ng-model绑定的数据变成字符串(可以+""来实现)

原因是你ng-repeat遍历出来的是字符串,ng-model却是个number,这里说的值都是id值,匹配不上造成(如果说错了打身上可以但别打脸),如果你是放在select里写ng-options请另外开个百度页

网上找了很多办法,大多数都是把遍历放在select里用ng-options(用for)来遍历,并说用track by xxx.id来解决,但那种情况直接把“请选择”,“新增”,“--------”都干掉了,

也有说在ng-repeat里用track by,我也试了没用,

也有说赋初值,

我是用上面方法解决了,还有点难找,百度里很少有,看了很多偶尔想起一个大神说的,贴在这里让其他人知道这个坑(而后绕行),

点个赞吧,你的鼓励是我最大的动力,多谢!

{ title: '${message("是否安装")}', field: 'installation', align: 'center', width: 150, formatter: function (val, item, rowIndex, obj) { var html = ' <select name="contractItems[' + itemIndex + '].installation" class="text installation required" onChange="editInstall(this)" > ' + '<option value="2" selected>${"否"}</option>' + '<option value="1" >${"是"}</option>' + "</select>"; return html; } }, function initAfterSales(){ var contractAfterSaleTerms = []; var afterSalesTermsIndex = 0; var afterSalesCols = [[ { title: '${message("售后类型")}', field: 'afer_sale_type', width: 150, align: 'center', formatter: function (val, item, rowIndex) { var html = '<select name="contractAfterSaleTerms[' + rowIndex + '].aferSaleType" class="text aferSaleType" onchange="editRequired(this)">'+ '<option value="">请选择</option>' + '<option value="0">质保</option>' + '<option value="1">开机调试</option>' + '<option value="2">巡检</option>' + '<option value="3">保养</option>' + '</select>'; return html; } }, { title: '${message("基准类型")}', field: 'after_sale_calculate_tpye', width: 150, align: 'center', formatter: function (val, item, rowIndex) { var html = ' <select name="contractAfterSaleTerms[' + rowIndex + '].afterSaleCalculateTpye" class="text afterSaleCalculateTpye required" onChange="editRate(this)" > ' + '<option value="">请选择</option>' + '<option value="0">实际出库日期</option>' + '<option value="1">初验日期</option>' + '<option value="2">终验日期</option>' + "</select>"; return html; } }, { title: '${message("频率")}', field: 'after_sale_interval', align: 'center', width: 150, formatter: function (val, item, rowIndex) { var html = '<select name="contractAfterSaleTerms[' + rowIndex + '].afterSaleInterval" class="text afterSaleInterval " onchange="editRate(this)">' + '<option value="">请选择</option>' + '<option value="0">月</option>' + '<option value="1">季度</option>' + '<option value="2">半年度</option>' + '<option value="3">年度</option>' + "</select>"; return html; } }, { title: '${message("次数")}', field: 'times', width: 150, align: 'center', formatter: function (val, item, rowIndex) { var html = '<input name="contractAfterSaleTerms[' + rowIndex + '].times" class="text times" min="0" step="1" value = "' + val + '" type="number">'; return html; } }, { title: '备注', align: 'center', field: 'remark', width: 240, formatter: function (val, item, rowIndex) { return '<input name="contractAfterSaleTerms[' + rowIndex + '].remark" class="text remark" value="'+val+'" type="text">'; } }, { title: '${message("操作")}', field: 'xxx', align: 'center', width: 60, formatter: function (val, item,rowIndex) { rowIndex++; return '<a href="javascript:;" class="deleteAfterSalesTerms btn-delete">删除</a>'; } } ]]; var options = { tableName: "tableAfterSalesList",//表名 columns: afterSalesCols,//列 pagination: false,//是否使用分页 callback: function () { } }; //初始化列表 initEasyUiTable('#table-afterSales', options); $("#addAfterSales").click(function () { var rows = $('#table-afterSales').datagrid('getRows'); if (rows.length == 4) { $.message_alert("最多只能添加4行!"); return false; } $('#table-afterSales').datagrid('appendRow', {}); }); $(".deleteAfterSalesTerms").live("click", function () { var index = $(this).closest("tr").index(); $('#table-afterSales').datagrid('removeRow', index); }); } <div class="title-style"> ${message("售后条款")} <div class="btns"> <a href="javascript:;" id="addAfterSales" class="button">添加售后条款</a> </div> </div> <table id="table-afterSales"><tbody> </tbody></table> 请实现 当是否安装为是 新增一行数据 售后类型为开机调试,不重复添加
最新发布
10-31
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值