ui-select使用实例

前端时间使用ui-select，发现copy过来还是用的不顺手，发现做备份的习惯还是要有的。所以在此将ui-select使用例子贴出来，方便后期踩坑。
一般我们采用下拉框选择大量数据的时候，往往需要联想搜索。采用ui-select。

• 采用全局options存放对象，避免ng-if导致的scope作用域影响使用。
• 采用ui-select 需要在本项目安装 bower install angular-ui-select。
• 一定要使用 append-to-body = “true” 这是保证页面交互的关键。
• 采用ui-select时，不需要加载页面的时候就调用getSelectBody（）。同时也应该避免其他方法调用获取下拉框内容的方法。避免浪费不必要的饿ajax请求。

<li class="page-wrap" ng-repeat="item in options.page_checked_list track by $index" >
   <span class="page-index">{{$index+1}}span>
   <div class="test-detail"  >
       <div class="test-p" style="padding-left:20px;">
         <input type="radio"  ng-model="item.is_out" ng-checked="true" value="0"/> 
         <span >内部页面span>
                    
         <input type="radio"  ng-model="item.is_out"  value="1"  ng-if="options.show_is_out_checked" /> 
         <span ng-if="options.show_is_out_checked">外部页面span>
        div>
        <div class="test-p">
             <span class="name">页面名称:span>
              <ui-select   ng-model="item.page_selected" theme="select2" ng-disabled="disabled"   append-to-body = "true"  ng-change="updateSelectedList(item)" style="margin-left:10px;width:350px;" >
                    <ui-select-match  style="width:100%;height:35px;" placeholder="请选择页面">{{$select.selected.name}}ui-select-match>
                    <ui-select-choices  refresh="getSelectBody(item,$select.search,$index)" repeat="page in item.allPage | filter: $select.search track by page.id"  style="height:250px;">
                      <div ng-bind-html="page.name | highlight: $select.search">div>
                    ui-select-choices>
                  ui-select>
                  <span class="delete-page" ng-if="options.page_checked_list.length>2" ng-click="deletePage($index)">-span>
         div>
         <div class="test-p">
             <span class="name" style="margin-right:10px;">页面url:span>
             <input ng-if="item.page_id" class="input c-text__input" type="text" ng-model="item.url" readonly>
              <span class="url-null" ng-if="!item.page_id">-- --span>
         div>
         <div class="test-p">
             <span class="name">流量分配:span> 
             <input class="form-control input input-weight" type="number" ng-model="item.weight" style="float:left;">%
         div>
   div>
 li>

效果图：