{"id":24485415,"url":"https://github.com/stefanovollono/angular-select","last_synced_at":"2025-07-14T18:33:24.728Z","repository":{"id":21481635,"uuid":"93052804","full_name":"StefanoVollono/angular-select","owner":"StefanoVollono","description":"Angular Select is a responsive and customizable select for angular 1.x. A simple directive along with a configuration object and you’re ready to go.","archived":false,"fork":false,"pushed_at":"2023-03-14T22:13:15.000Z","size":2610,"stargazers_count":1,"open_issues_count":5,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-13T19:28:10.068Z","etag":null,"topics":["angular","angular-select","angularjs","options","scss","select"],"latest_commit_sha":null,"homepage":"https://stefanovollono.github.io/angular-select/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StefanoVollono.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-01T12:03:31.000Z","updated_at":"2022-02-15T21:00:03.000Z","dependencies_parsed_at":"2024-11-19T06:16:46.609Z","dependency_job_id":"ba37478b-3224-4560-9cfe-8844b0d1683d","html_url":"https://github.com/StefanoVollono/angular-select","commit_stats":{"total_commits":73,"total_committers":4,"mean_commits":18.25,"dds":0.2465753424657534,"last_synced_commit":"b33030565729d428438c6e9270e74b4e82d9555b"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StefanoVollono%2Fangular-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StefanoVollono%2Fangular-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StefanoVollono%2Fangular-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StefanoVollono%2Fangular-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StefanoVollono","download_url":"https://codeload.github.com/StefanoVollono/angular-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243652702,"owners_count":20325607,"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":["angular","angular-select","angularjs","options","scss","select"],"created_at":"2025-01-21T14:17:50.266Z","updated_at":"2025-03-14T21:48:32.491Z","avatar_url":"https://github.com/StefanoVollono.png","language":"JavaScript","readme":"[![Build Status](https://travis-ci.com/StefanoVollono/angular-select.svg?branch=master)](https://travis-ci.com/StefanoVollono/angular-select)\n\n# angular-select\nAngular Select is a responsive and customizable select for angular 1.x. A simple directive along with a configuration object and you're ready to go. [Demo](https://stefanovollono.github.io/angular-select/)\n\n## Installation with npm\n`npm install angular-select-option --save`\n\n## How to use:\n\n### Method 1: import scripts in your html and the directive as a module dependency:\n\n```html\n\u003c!-- You can choose umd format --\u003e\n\u003cscript src=\"\u003cyour-node-module-path\u003e/dist/angular-select-umd.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Or you can choose es6 module. Don't forget type=module --\u003e\n\u003cscript type=\"module\" src=\"\u003cyour-node-module-path\u003e/angular-select-option/src/lib/angular-select.js\"\u003e\u003c/script\u003e\n ```\n\n ```javascript\nangular.module('myApp', ['angular-select']);\n```\n\n### Method 2: import all scripts from node_modules and use it as module dependency (see the demo folder):\n\n ```javascript\nimport angular from 'angular';\nimport angularSelect from 'angular-select-option/lib/angular-select'; \n\nangular.module('myApp', ['angular-select']);\n```\n\n ## The CSS\nYou can choose between the scss or che css version.\nChoosing SASS allow you to specify some graphic behaviour overriding the global variables in\nangular-select.scss file\n\n\n```css\n// default settings\n$max-width:       none!default;\n$select-height:   45px!default;\n$header-color:    #37474f!default;\n$arrow-bg:        #0080ff!default;\n$arrow-fill:      #ffffff!default;\n$arrow-width:     32px!default;\n$header-bg:       #ffffff!default;\n$options-bg:      #fafafa!default;\n$options-color:   #37474f!default;\n$options-shadow:  0 5px 10px -4px rgba(0, 0, 0, .36)!default;\n```\n\n## Custom Atribute\nthese are the custom attributes available\n\n```javascript\nscope: {\n  selectoptionName: \"@\", //name to display above the select\n  selectoptionModel: \"=\", //model to bind the selected value\n  selectoptionElements: \"=\", //list of the options\n  selectoptionCallback: \"\u0026?\", //callback to be triggered on click\n  selectoptionRequired: \"=?\", //if the select is required e.g. inside a form\n  selectoptionOrderby: \"@?\" //order to display the elements\n},\n```\n\n## Usage\nA simple example available in /demo folder\n\n```html\n\u003cform name=\"formName\" novalidate\u003e\n  \u003cspan ng-if=\"formName.$submitted \u0026\u0026 formName.countries.$error.required\"\u003eRequired\u003c/span\u003e\n  \u003cselect-option\n    selectoption-name=\"countries\"\n    selectoption-model=\"formData.countries\"\n    selectoption-elements=\"countries\"\n    selectoption-callback=\"countriesCallback(index)\"        \n    selectoption-required=\"true\"\n    selectoption-orderby=\"desc\"\u003e\n  \u003c/select-option\u003e\n  \u003cbutton type=\"submit\" class=\"btn btn-primary\"\u003eSend\u003c/button\u003e\n\u003c/form\u003e\n```\n\n```javascript\n// Form Model\n$scope.formData = {};\n\n// Countries Data\n$scope.countries = {\n  title: 'Nation',\n  items : [\n    {label: 'France', value: 'FR'},\n    {label: 'England', value: 'UK'},\n    {label: 'Germany', value: 'DE'}\n  ]\n};\n\n// Countries Callback\n$scope.countriesCallback = function (index) {\n  $scope.callbackResult = index;\n};\n```\n\n## How to run local npm scripts\n```javascript\n // Run local dev server on demo folder\n npm run serve\n\n // Start demo build process. Create demo folder inside dist.\n npm run build:demo\n\n // Export minified lib in UMD and ESM format inside dist folder.\n npm run build:lib\n\n // Serve build demo inside dist folder\n npm run serve:build-demo\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefanovollono%2Fangular-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstefanovollono%2Fangular-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefanovollono%2Fangular-select/lists"}