ui-select官方教程（二）——ui-select指令
- 2019 年 10 月 30 日
- 筆記
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';});
