ui-select使用实例

最新推荐文章于 2024-11-06 08:20:53 发布

弱翁

最新推荐文章于 2024-11-06 08:20:53 发布

阅读量7.2k

点赞数 1

分类专栏： html 文章标签：前端

本文链接：https://blog.csdn.net/BlackSun_JAVA/article/details/73776050

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端时间使用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>

效果图：
这里写图片描述