文档原文地址
https://github.com/angular-ui/ui-select/wiki
入门指南
简介
ui-select是AngularJS官方制作的下拉框插件,和AngularJS搭配使用,效果很好。
要求
Angular >=1.2.18
ngSanitize module添加
jQuery(旧版浏览器支持可选)
Bootstrap (v3)/Select2/Selectize CSS适当引用
浏览器兼容性版本在Internet Explorer 8和火狐3.6以上。
引入文件
select.js
select.css
在你的appliction的modules中包含ui-select、ngSanitize模块
代码语言:javascript复制var module = angular.module('myapp',['ui.select', 'ngSanitize']);
基本例子
html代码
代码语言:javascript复制<ui-select ng-model="selected.value">
<ui-select-match>
<span ng-bind="$select.selected.name">
</span>
</ui-select-match>
<ui-select-choices repeat="item in (itemArray | filter:$select.search) track by item.id">
<span ng-bind="item.name">
</span>
</ui-select-choices>
</ui-select>
Js代码
代码语言:javascript复制angular.module('app').controller('ctrl',['$scope', function($scope) {
$scope.itemArray= [{ id: 1, name: 'first' },
{id: 2, name: 'second' },
{id: 3, name: 'third' },
{id: 4, name: 'fourth' },
{id: 5, name: 'fifth' }];
$scope.selected = { value: $scope.itemArray[0] };
}]);
代码含义
<ui-select>
ui-select是控件的主标签,它包含数据绑定和空间的基本设置。
<ui-select-match>
是控件的选中显示,通过”$select.selected”可以拿到选中的对象
<ui-select-choices>
是控件的下拉部分。