ui-select官方教程（二）——ui-select指令

灰太狼 2022-06-13 13:22 251阅读 0赞

## ui-select指令 ##

ui-select的指令和事件

### 属性 ###

<table> 
 <tbody> 
 <tr> 
 <td> 选项 </td> 
 <td> 描述 </td> 
 <td> 值 </td> 
 <td> 默认值 </td> 
 </tr> 
 <tr> 
 <td style="background:#F2F2F2"> multiple </td> 
 <td style="background:#F2F2F2"> 多选，直接加上multiple属性 </td> 
 <td style="background:#F2F2F2"> &nbsp; </td> 
 <td style="background:#F2F2F2"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> close-on-select </td> 
 <td> 在多选情况下，选中一项，就关闭下拉项 </td> 
 <td> boolean </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td style="background:#F2F2F2"> append-to-body </td> 
 <td style="background:#F2F2F2"> 在多选情况下，选中项追加显示 </td> 
 <td style="background:#F2F2F2"> boolean </td> 
 <td style="background:#F2F2F2"> false </td> 
 </tr> 
 <tr> 
 <td> ng-disabled </td> 
 <td> 控件被禁用 </td> 
 <td> boolean </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td style="background:#F2F2F2"> ng-model </td> 
 <td style="background:#F2F2F2"> 控件绑定对象 </td> 
 <td style="background:#F2F2F2"> String,number,array </td> 
 <td style="background:#F2F2F2"> undefined </td> 
 </tr> 
 <tr> 
 <td> search-enabled </td> 
 <td> 搜索功能 </td> 
 <td> boolean </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td style="background:#F2F2F2"> reset-search-input </td> 
 <td style="background:#F2F2F2"> 选中一项后清楚搜索数据 </td> 
 <td style="background:#F2F2F2"> boolean </td> 
 <td style="background:#F2F2F2"> true </td> 
 </tr> 
 <tr> 
 <td> theme </td> 
 <td> 主题，有’bootstrap’、 ’select’、’select2’ </td> 
 <td> String </td> 
 <td> bootstrap’ </td> 
 </tr> 
 <tr> 
 <td style="background:#F2F2F2"> autofocus </td> 
 <td style="background:#F2F2F2"> 加载时自动获得焦点 </td> 
 <td style="background:#F2F2F2"> boolean </td> 
 <td style="background:#F2F2F2"> true </td> 
 </tr> 
 <tr> 
 <td> focus-on </td> 
 <td> 定义一个监听事件的名字(e.g. focus-on='SomeEventName') </td> 
 <td> String </td> 
 <td> undefined </td> 
 </tr> 
 <tr> 
 <td style="background:#F2F2F2"> limit </td> 
 <td style="background:#F2F2F2"> 限制多选择模式选择的项目数 </td> 
 <td style="background:#F2F2F2"> integer </td> 
 <td style="background:#F2F2F2"> undefined </td> 
 </tr> 
 </tbody> 
</table>

### 事件 ###

<table> 
 <tbody> 
 <tr> 
 <td> 事件名 </td> 
 <td> 描述 </td> 
 <td> 例子 </td> 
 </tr> 
 <tr> 
 <td style="background:#F2F2F2"> on-remove </td> 
 <td style="background:#F2F2F2"> 当项被删除时发生 </td> 
 <td style="background:#F2F2F2"> on-remove="someFunction($item, $model)" </td> 
 </tr> 
 <tr> 
 <td> on-select </td> 
 <td> 当项被选中时发生 </td> 
 <td> on-select="someFunction($item, $model)" </td> 
 </tr> 
 </tbody> 
</table>

### 全局配置 ###

你可以使用全局配置来配置你的ui-select

app.config(function(uiSelectConfig) {uiSelectConfig.theme = 'bootstrap';
       uiSelectConfig.resetSearchInput = true;
    uiSelectConfig.appendToBody= true; });

### 主题 ###

ui-select有下列主题：

l  bootstrap

l  select2

l  selectize

主题可以设置为全局配置

var app = angular.module('app',['ui.select']);
    app.config(function(uiSelectConfig) {uiSelectConfig.theme = 'bootstrap'; });

或者在标签属性中设置，如：

<ui-selectng-model="animal.id" theme="bootstrap"> ...</ui-select>

### 添加引用 ###

使用主题需要应用相应css

**主题: bootstrap**