angular chosen

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>中手动包含一个空的选项，否则您会遇到奇怪的逐个错误：

 < 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 >

在加载状态下定义的选择的图像： <img src=\"https://raw.g**ithu*b.com/localytics/angular-chosen/master/example/choose-a-beer.png\">

注意：直接在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!\'
        } ) ;
    } ] ) ;