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

最新推荐文章于 2020-10-02 18:24:44 发布

Curry_BB

最新推荐文章于 2020-10-02 18:24:44 发布

阅读量3.8k

点赞数 1

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

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

版权

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

摘要由CSDN通过智能技术生成

最近在做一个项目，前端使用的是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>

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