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>                  &nbsp;&nbsp;         <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">--&nbsp;--</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>

效果图：