angular-chosen-localytics

2018-07-13 admin

angular-chosen-localytics是什么

什么是angular-chosen-localytics,Angular Chosen directive is an AngularJS Directive that brings the Chosen jQuery in a Angular way

angular-chosen-localytics介绍、angular-chosen-localytics使用

</script>


Or download zip file

> [Download v1.8.0](https://github.com/leocaseiro/angular-chosen/archive/1.8.0.zip)

## [](#yeoman-or-bower-install)Yeoman or Bower install

If you use Yeoman or Bower install, you need to rename the `chosen.jquery.js` or the `chosen.proto.js` to `chosen.js`. Otherwise Chosen won't be included in your `index.html`.

# [](#features)Features

*   Works with `ngModel` and `ngOptions`
*   Supports usage of promises in `ngOptions`
*   Provides a 'loading' animation when 'ngOptions' collection is a promise backed by a remote source
*   Pass options to `Chosen` via attributes or by passing an object to the Chosen directive
*   Provider with default values with `chosenProvider` ([read: Added config-provider](https://github.com/leocaseiro/angular-chosen/pull/231)) [since 1.6.0]

# [](#usage)Usage

### [](#simple-example)Simple example

Similar to `$("#states").chosen()`

```text-html-basic
<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>

Pass any chosen options as attributes

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

Note: the empty option element is mandatory when using allow-single-deselect

Integration with ngModel and ngOptions

<select multiple
        chosen
        ng-model="state"
        ng-options="s for s in states">
</select>

Note: don’t try to use ngModel with ngRepeat. It won’t work. Use ngOptions. It’s better that way.

Also important: if your ngModel is null or undefined, you must manually include an empty option inside your <select>, otherwise you’ll encounter strange off-by-one errors:

<select multiple
        chosen
        ng-model="state"
        ng-options="s for s in states">
  <option value=""></option>
</select>

This annoying behavior is alluded to in the examples in the documentation for ngOptions.

Works well with other AngularJS directives

<select chosen
        ng-model="state"
        ng-options="s for s in states"
        ng-disabled="editable">
  <option value=""></option>
</select>

Loading from a remote data source

Include chosen-spinner.css and spinner.gif to show an Ajax spinner icon while your data is loading. If the collection comes back empty, the directive will disable the element and show a default “No values available” message. You can customize this message by passing in noResultsText in your options.

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>

Image of select defined above in loading state: `

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35921.html

文章标题:angular-chosen-localytics

回到顶部