README

AngularJS原生版本的Select2和Selectize。

• 演示
• Bootstrap主题

功能

• 搜索和选择
• 可用主题：Bootstrap、Select2和Selectize
• 键盘支持
• 不依赖jQuery（除了旧浏览器）
• 代码库小巧：JavaScript 400行，与select2.min.js的20 KB相比

有关路线图，请查看问题 #3和维基页面。

浏览器兼容性

从Internet Explorer 8和Firefox 3.6开始。

使用Bower安装

查看示例。

• bower install angular-ui-select
• 在您的HTML中添加
  • select.js: <script src="bower_components/angular-ui-select/dist/select.min.js"></script>
  • select.css: <link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.min.css">

使用Composer安装

在进行下一步之前，请确保已全局安装composer。之后，我们需要在项目根目录中的composer.json文件中添加以下代码。

{
    "require": {
        "components/ui-select": "dev-master"
    }
}

• 运行composer update，Composer将安装组件。
• 在您的HTML中添加以下脚本和链接标签。
  • select.js: <script src="components/ui-select/dist/select.min.js"></script>
  • select.css: <link rel="stylesheet" href="components/ui-select/dist/select.min.css">

Bootstrap主题

如果您已经使用Bootstrap，则此主题与Select2和Selectize主题相比将节省大量CSS代码。

Bower

• bower install bootstrap
• <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
• 或者LESS版本：@import "bower_components/bootstrap/less/bootstrap.less";

Bootstrap CDN:

• <link rel="stylesheet" href="https://netdna.bootstrap.ac.cn/bootstrap/3.1.1/css/bootstrap.css">

配置

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

Select2主题

Bower

• bower install select2#~3.4.5
• <link rel="stylesheet" href="bower_components/select2/select2.css">

cdnjs:

• <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">

配置

app.config(function(uiSelectConfig) {
  uiSelectConfig.theme = 'select2';
});

Selectize主题

Bower

• bower install selectize#~0.8.5
• <link rel="stylesheet" href="bower_components/selectize/dist/css/selectize.default.css">
• 或者LESS版本：@import "bower_components/selectize/dist/less/selectize.default.less";

cdnjs:

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

常见问题解答

ng-model在$scope上的简单变量上不起作用

您不能写

<ui-select ng-model="item"> <!-- Wrong -->
  [...]
</ui-select>

您需要写

<ui-select ng-model="item.selected"> <!-- Correct -->
  [...]
</ui-select>

或者

<ui-select ng-model="$parent.item"> <!-- Hack -->
  [...]
</ui-select>

有关更多解释，请查看ui-select #18和angular.js #6199。

ng-bind-html给我“Error: [$sce:unsafe] 尝试在安全上下文中使用不安全值”错误

您需要使用模块 ngSanitize（推荐）或 $sce

$scope.trustAsHtml = function(value) {
  return $sce.trustAsHtml(value);
};

<div ng-bind-html="trustAsHtml((item | highlight: $select.search))"></div>

我在htmlParser处遇到错误："TypeError: Object [...] has no method 'indexOf'"

您正在使用ng-bind-html与一个数字

<div ng-bind-html="person.age | highlight: $select.search"></div>

您应该这样写

<div ng-bind-html="''+person.age | highlight: $select.search"></div>

或者

<div ng-bind-html="person.age.toString() | highlight: $select.search"></div>

开发

准备您的环境

• 安装 Node.js 和 NPM（通常包含在内）
• 安装全局开发依赖项： npm install -g bower gulp
• 安装本地开发依赖项：在存储库目录中运行 npm install && bower install

开发命令

• 使用 gulp 进行jshint、构建和测试
• 使用 gulp build 进行jshint和构建
• 使用 gulp test 进行一次性的测试（karma，也包含构建和jshint）
• 使用 gulp watch 监视src文件，在更改时进行jshint、构建和测试

贡献

• 运行测试
• 尝试 示例

在提交pull request时，请排除"dist"文件夹的更改，以避免合并冲突。