在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元素的拼接是会马上生效的。当页面有了数据插件就可以识别了。

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