AngularJS+Layui开发下拉框遇到的问题

最近在做一个项目,前端使用的是AngularJS处理后台传过来的数据,因为下拉框一直用的是原生的,倒是没遇到什么问题。直到我后来遇到了Layui,因为项目原先的前端做的很烂,兼容性特别差,然后我就想着用Layui重新做个前端,之后问题就来了……

用过Layui的都知道,她的下拉框是在原生的select上用div的形式显示出来的,比原先的会好看很多,每次动态创建下拉框之后,我们都需要调用form.render();或者form.render('select');来重载下拉框。其他的我不知道,反正看社区里的用js循环拼接的下拉框好像都是可以用render来重载的。

但是我TM用AngularJS就死活都不可以,看看前端代码:

这样写是可以正常显示出来没错,在筛选或者添加这种操作中没有问题,但是在修改中,问题就会暴露出来了。

这样写了之后我就发现,在检查视图中我可以看到select其实已经构建好了,包括选中项的状态也是对的,但是前段显示的就是没有。包括后来我用$(id).val();的方式赋值,结果更为过分,省份是选中了,但是市和区都还是默认的“请选择市/区”。

AngularJS+Layui开发下拉框遇到的问题_第1张图片


Layui中有一个功能模块叫“模板引擎”,在网上看到过有人会用这个来做省市区三级级联,后来我也跟着用这个做了一个省市区三级级联,还可以,基本上的功能都可以实现,就是代码太多太重复了。


(忘记前端的代码了……)

接着我们来看看成果:


可以看到已经完全满足我的需求了,但是问题就来了,就向我刚刚说的,这样写代码量太大了,每次需要用到下拉框的时候,包括下拉框的事件,都需要写一遍,后来秉着能少一点代码就少一点的原则,想着还是封装一点什么东西……

新建一个js文件:

layui.use(['laytpl', 'form'], function() {
	var laytpl = layui.laytpl,
		form = layui.form;
	// 获取模板
	var getTpl = provinceSelect.innerHTML,
	    areTpl = areaSelect.innerHTML;
	// 此处需要用window.方法名,这样在其它的js中才可以调用这个方法
	window.renderSelect = function(arr) {
	    for(var i = 0; i < arr.length; i++) {
		laytpl(arr[i].type == 1 ? getTpl : areTpl).render(arr[i].data, function(html) {
			arr[i].e.innerHTML = html;
		});
	    }
	    form.render('select');
	}
});

这样我们在需要用到下拉框的页面引入这个js,然后我们调用方法所需要的数据格式也要改一下。


                    
                    

你可能感兴趣的:(AngularJS+Layui开发下拉框遇到的问题)