ui-select官方教程（二）——ui-select指令
ui-select指令
ui-select的指令和事件
属性
选项 | 描述 | 值 | 默认值 |
|---|---|---|---|
multiple | 多选，直接加上multiple属性 | ||
close-on-select | 在多选情况下，选中一项，就关闭下拉项 | boolean | true |
append-to-body | 在多选情况下，选中项追加显示 | boolean | false |
ng-disabled | 控件被禁用 | boolean | true |
ng-model | 控件绑定对象 | String,number,array | undefined |
search-enabled | 搜索功能 | boolean | true |
reset-search-input | 选中一项后清楚搜索数据 | boolean | true |
theme | 主题，有’bootstrap’、 ’select’、’select2’ | String | bootstrap’ |
autofocus | 加载时自动获得焦点 | boolean | true |
focus-on | 定义一个监听事件的名字(e.g. focus-on='SomeEventName') | String | undefined |
limit | 限制多选择模式选择的项目数 | integer | undefined |
事件
事件名 | 描述 | 例子 |
|---|---|---|
on-remove | 当项被删除时发生 | on-remove="someFunction($item, $model)" |
on-select | 当项被选中时发生 | on-select="someFunction($item, $model)" |
全局配置
你可以使用全局配置来配置你的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
文件:
<link rel="stylesheet"href="bower_components/bootstrap/dist/css/bootstrap.css">或者使用less版本
CDN:
<link rel="stylesheet"href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">配置
app.config(function(uiSelectConfig){uiSelectConfig.theme='bootstrap';});主题: select2
文件:
版本select2~3.4.5
<link rel="stylesheet"href="bower_components/select2/select2.css">CDN:
<link rel="stylesheet"href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">配置
app.config(function(uiSelectConfig){uiSelectConfig.theme='select2';});主题: selectize
文件:
版本selectize~0.8.5
<link rel="stylesheet"href="bower_components/selectize/dist/css/selectize.default.css">或者使用less版本
CDN:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">配置
app.config(function(uiSelectConfig){uiSelectConfig.theme='selectize';});