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';});