{"id":20873736,"url":"https://github.com/dbtek/angular-chosen","last_synced_at":"2025-03-12T15:43:41.462Z","repository":{"id":15023741,"uuid":"17749475","full_name":"dbtek/angular-chosen","owner":"dbtek","description":"Angular directives for Chosen","archived":false,"fork":false,"pushed_at":"2015-04-01T08:48:19.000Z","size":149,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-19T10:05:47.151Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"overboming/ZCAnimatedLabel","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dbtek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-14T14:47:45.000Z","updated_at":"2015-05-27T10:34:19.000Z","dependencies_parsed_at":"2022-09-07T03:53:17.060Z","dependency_job_id":null,"html_url":"https://github.com/dbtek/angular-chosen","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbtek%2Fangular-chosen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbtek%2Fangular-chosen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbtek%2Fangular-chosen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbtek%2Fangular-chosen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dbtek","download_url":"https://codeload.github.com/dbtek/angular-chosen/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243248161,"owners_count":20260749,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-18T06:27:02.806Z","updated_at":"2025-03-12T15:43:41.438Z","avatar_url":"https://github.com/dbtek.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"angular-chosen\n==============\n\nAngularJS Chosen directive\n\nBased on [localytics' angular-chosen](https://github.com/localytics/angular-chosen). Provides some extra directives such as accessing search input value within scope and passing scope variable as placeholder.\n\nThis directive brings the [Chosen](http://harvesthq.github.com/chosen/) jQuery plugin\ninto AngularJS with ngModel and ngOptions integration.\n\nTo use, include \"ngChosen\" as a dependency in your Angular module.  You can now\nuse the \"chosen\" directive as an attribute on any select element.  Angular version 1.2+ is required.\n\n# Installation\n\n    $ bower install angular-ngchosen\n\n# Features\n  * Works with `ngModel` and `ngOptions`\n  * Supports usage of promises in `ngOptions`\n  * Pass scope function via attributes to access search input term.\n  * Pass placeholder variable via attributes\n  * Provides a 'loading' animation when 'ngOptions' collection is a promise backed by a remote source\n  * Pass options to `Chosen` via attributes or by passing an object to the Chosen directive\n\n# Usage\n\n### Simple example\nSimilar to `$(\"#states\").chosen()`\n\n```html\n\u003cselect chosen multiple id=\"states\"\u003e\n  \u003coption value=\"AK\"\u003eAlaska\u003c/option\u003e\n  \u003coption value=\"AZ\"\u003eArizona\u003c/option\u003e\n  \u003coption value=\"AR\"\u003eArkansas\u003c/option\u003e\n  \u003coption value=\"CA\"\u003eCalifornia\u003c/option\u003e\n\u003c/select\u003e\n```\n\n### Pass any chosen options as attributes\n\n```html\n\u003cselect chosen\n        data-placeholder=\"Pick one of these\"\n        disable-search=\"true\"\n        allow-single-deselect=\"true\"\u003e\n  \u003coption value=\"\"\u003e\u003c/option\u003e\n  \u003coption\u003eThis is fun\u003c/option\u003e\n  \u003coption\u003eI like Chosen so much\u003c/option\u003e\n  \u003coption\u003eI also like bunny rabbits\u003c/option\u003e\n\u003c/select\u003e\n```\n\n### Integration with `ngModel` and `ngOptions`\n\n```html\n\u003cselect multiple\n        chosen\n        ng-model=\"state\"\n        ng-options=\"s for s in states\"\u003e\n\u003c/select\u003e\n```\n\nNote: don't try to use `ngModel` with `ngRepeat`.  It won't work.  Use `ngOptions`.  It's better that way.\n\nAlso important: if your `ngModel` is null or undefined, you must manually include an empty option inside your `\u003cselect\u003e`, otherwise you'll encounter strange off-by-one errors:\n\n```html\n\u003cselect multiple\n        chosen\n        ng-model=\"state\"\n        ng-options=\"s for s in states\"\u003e\n  \u003coption value=\"\"\u003e\u003c/option\u003e\n\u003c/select\u003e\n```\n\nThis annoying behavior is alluded to in the examples in the [documentation for ngOptions](http://docs.angularjs.org/api/ng.directive:select).\n\n#### Works well with other AngularJS directives\n\n```html\n\u003cselect chosen\n        ng-model=\"state\"\n        ng-options=\"s for s in states\"\n        ng-disabled=\"editable\"\u003e\n\u003c/select\u003e\n```\n### Loading from a remote data source\nInclude 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\n\"No values available\" message.  You can customize this message by passing in noResultsText in your options.\n\n##### app.js\n```js\nangular.module('App', ['ngResource', 'ngChosen'])\n.controller('BeerCtrl', function($scope) {\n  $scope.beers = $resource('api/beers').query()\n});\n```\n\n##### index.html\n```html\n\u003cdiv ng-controller=\"BeerCtrl\"\u003e\n  \u003cselect chosen\n          data-placeholder=\"Choose a beer\"\n          no-results-text=\"'Could not find any beers :('\"\n          ng-model=\"beer\"\n          ng-options=\"b for b in beers\"\u003e\n  \u003c/select\u003e\n\u003c/div\u003e\n```\n\nImage of select defined above in loading state:  \u003cimg src=\"https://raw.github.com/localytics/angular-chosen/master/example/choose-a-beer.png\"\u003e\n\nNote: Assigning promises directly to scope is now deprecated in Angular 1.2+.  Assign the results of the promise to scope\nonce the promise returns.  The loader animation will still work as long as the collection expression\nevaluates to `undefined` while your data is loading!\n\n### Access search input term in Angular scope\n**Html**  \n```html\n\u003cdiv ng-controller=\"StateCtrl\"\u003e\n    \u003cselect chosen\n            ng-model=\"state\"\n            ng-options=\"s for s in states\"\n            input-change-handler=\"chosenChangeHandler\"\u003e\n    \u003c/select\u003e\n\u003c/div\u003e\n```\n**Script**  \n```js\nangular.module('App', ['ngChosen'])\n.controller('StateCtrl', function($scope) {\n    $scope.states = ['Alaska','Arizona','Arkansas','California'];\n\n    $scope.chosenChangeHandler = function chosenChangeHandler(val) {\n        // set model\n        $scope.chosenSearchTerm = val;\n    }\n});\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdbtek%2Fangular-chosen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdbtek%2Fangular-chosen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdbtek%2Fangular-chosen/lists"}