在angular js 中使用 ui-jq=“chosen” 这个插件发生的血案

  前言:本人在项目中使用了angular js  却 跟着别人用了jquery 的下拉框插件--- ui-jq="chosen"。

出现的情况,在页面第一次加载时始终无法 初始化数据.


  <select ui-jq="chosen" multiple class="w-xxxl"  ng-model="group.empList" id="chosen">
           <option ng-repeat="employee in groupEmpList" value="{{employee.empid}}" >{{employee.adAccount}}</option> 
 </select>


总结原因:这个插件只有在页面实际有了数据后才会在select 下生成input 显示成下拉样式。

你直接在页面写死了数据。样式是可以出来的,

如:  <select ui-jq="chosen" multiple class="w-xxxl"  ng-model="group.empList" id="chosen">
           <option  value="0" >aaa</option> 

   <option  value="1" >abbb</option> 

    <option  value="2" >cc</option> 
 </select>

但是你用了ng-repeat 循环就是不出来。要自已手动刷新一遍。。。。



原因在于:::angular js 渲染的东西都是在js 加载完以后页面才有数据。而我的数据就是在js 中使用ajax 加载出来 的,所以在初始化页面的时候根本无法被插件识别。


解决方法: groupManageService.getEmpList()
.then(function(response) {
var chosenSelect=$("#OneChosen");
var emplistData=response.datas;
for(var i=0;i<emplistData.length;i++){//解决插件与angular js 不兼容。由于页面渲染导致无法显示样式
var employee=emplistData[i];
var html ="<option value='"+employee.empid+"' class='ng-binding ng-scope'>"+employee.adAccount+"</option>";
chosenSelect.append(html);
}
chosenSelect.trigger("chosen:updated");


在 js 文件中 将 option 动态拼接进去。dom元素的拼接是会马上生效的。当页面有了数据插件就可以识别了。

就不会出现第一次进入页面样式不显示的情况。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值