angular chosen局部学
Angularjs选择的指令
该指令将所选的jQuery插件带入具有NGMODEL和NGOPTIONS INTEMENTION的AngularJS。
要使用，包括localytics.directives作为您的角模块中的依赖性。现在，您可以将chosen指令用作任何选择元素上的属性。需要Angular版本1.3+，但建议使用1.4.9+。
完整的文档，示例
- GitHub页面上的文档
- 示例示例/index.html
安装（NPM或Bower）
通过鲍尔
$ bower install angular-chosen-localytics --save
通过NPM
$ npm install angular-chosen-localytics --save
通过CDN
< script src =" https://cdnjs.c*loud*fl*are.com/ajax/libs/angular-chosen-localytics/1.9.2/angular-chosen.min.js " > script >或下载zip文件
下载v1.9.2
Yeoman或Bower安装
如果您使用yeoman或bower install，则需要重命名chosen.jquery.js或chosen.proto.js将其重命名为chosen.js 。否则选择的index.html将不包括。
特征
- 与
ngModel和ngOptions合作 - 支持对
ngOptions中承诺的使用 - 当“ ngoptions”集合是由远程源支持的承诺时，提供“加载”动画
- 通过
Chosen通过属性或将对象传递给所选指令 - 带有默认值的提供商，带有
chosenProvider（读：添加了config-provider）[自1.6.0]
用法
简单示例
类似于$("#states").chosen()
< select chosen multiple id =" states " >
< option value =" AK " > Alaska option >
< option value =" AZ " > Arizona option >
< option value =" AR " > Arkansas option >
< option value =" CA " > California option >
select >传递任何选择的选项作为属性
">
< select chosen data-placeholder-text-single =" 'Pick one of these' " disable-search =" true " allow-single-deselect =" true " > < option value ="" > option > < option > This is fun option > < option > I like Chosen so much option > < option > I also like bunny rabbits option > select >
注意：使用
allow-single-deselect时，空的选项元素是必须的
与ngModel和ngOptions集成
< select multiple
chosen
ng-model =" state "
ng-options =" s for s in states " >
select >注意：不要尝试将
ngModel与ngRepeat一起使用。它行不通。使用ngOptions。这样更好。
同样重要的是：如果您的
ngModel为null或未定义，则必须手动在中手动包含一个空的选项，否则您会遇到奇怪的逐个错误：
< select multiple
chosen
ng-model =" state "
ng-options =" s for s in states " >
< option value ="" > option >
select >在ngoptions的文档中的示例中提到了这种烦人的行为。
与其他AngularJS指令搭配得很好
< select chosen
ng-model =" state "
ng-options =" s for s in states "
ng-disabled =" editable " >
< option value ="" > option >
select >从远程数据源加载
在您的数据加载时，请包括chosen-spinner.css和spinner.gif ，以在数据加载时显示Ajax Spinner图标。如果集合回到空，则指令将禁用元素并显示默认的“无值可用”消息。您可以通过在选项中传递noResultsText来自定义此消息。
app.js
angular . module ( 'App' , [ 'ngResource' , 'localytics.directives' ] )
. controller ( 'BeerCtrl' , function ( $scope , $resource ) {
$scope . beers = $resource ( 'api/beers' ) . query ( )
} ) ; index.html
< div ng-controller =" BeerCtrl " > < select chosen data-placeholder-text-single =" 'Choose a beer' " no-results-text =" 'Could not find any beers :(' " ng-model =" beer " ng-options =" b for b in beers " > < option value ="" > option > select > div >
在加载状态下定义的选择的图像： 
注意：直接在Angular 1.2+中弃用了直接分配承诺为范围。一旦承诺返回，将分配承诺范围的结果。只要收集表达式
undefined数据时，加载器动画仍将工作！
使用ChosenProvider（感谢@zlodes）[自1.6.0]的默认值
angular . module ( 'chosenExampleApp' , [ 'localytics.directives' ] )
. config ( [ 'chosenProvider' , function ( chosenProvider ) {
chosenProvider . setOption ( {
no_results_text : 'There is no results!' ,
placeholder_text_multiple : 'Choose one or more!'
} ) ;
} ] ) ;