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

Curry_BB

于 2018-03-20 15:11:07 发布

阅读量3.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签： AngularJS Layui 动态下拉框省市区三级级联

本文链接：https://blog.csdn.net/Curry_BB/article/details/79622804

在使用AngularJS与Layui进行前端开发时，作者遇到下拉框动态渲染的问题。Layui的下拉框在AngularJS中无法通过form.render()正确显示，特别是进行编辑操作时。作者尝试使用模板引擎实现省市区三级级联，虽然功能可行，但代码量过大。为减少代码，作者封装了一个方法，但仍存在数据封装的困扰。需要注意的是，避免使用JQuery的方法获取下拉框，应使用js的document.getElementById()。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

<select name="province" id="province">
    <option value="">请选择省</option>
    <option ng-repeat="item in provinceList" value="{
  
  {item.name}}">{
  
  {item.name}}</option>
</select>

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

<select name="province" id="province">
    <option value="">请选择省</option>
    <option ng-repeat="item in provinceList" ng-selected="item.name = province" value="{
  
  {item.name}}">{
  
  {item.name}}</option>
</select>

这样写了之后我

最低0.47元/天解锁文章

200万优质内容无限畅学