{"maintainers":[{"name":"anonymous","email":"bianchimro@gmail.com"}],"dist-tags":{"latest":"1.3.1-alpha.0"},"author":{"name":"bianchimro@gmail.com"},"description":"Modal select for ionic","readme":"# ionic-modal-select\n\nModal select for Ionic Framework based on [$ionicModal](http://ionicframework.com/docs/api/service/$ionicModal/)\n\nSee all docs and examples on the [project site](http://inmagik.github.io/ionic-modal-select).\n\nWe also have a simple [Codepen demo](http://codepen.io/bianchimro/pen/epYYQO?editors=101).\n\n\n\n## IMPORTANT NOTICE\n\n**In order to survive, this project needs**:\n* proper testing: see [issue #26](https://github.com/inmagik/ionic-modal-select/issues/26) \n* co-maintainers: see [issue #54](https://github.com/inmagik/ionic-modal-select/issues/54)\n\nAny help on this is greatly appreciated. Comment directly those issues or contact me directly at mauro.bianchi at inmagik.com if you are interested in helping with this.\n\n## Features\n\n* supports long list of object via collection-repeat\n* optional search bar\n* supports unsetting the chosen value (optional)\n* customizable modal classes, modal header and footer classes\n* customizable buttons text\n\n## Usage\n\nGet the files from github or install from bower:\n```\nbower install ionic-modal-select\n```\n\n\nInclude `ionic-modal-select.js` or its minified version in your index.html:\n\n```html\n\n\n\n```\n\n\nAdd the module `ionic-modal-select` to your application dependencies:\n\n```javascript\n\nangular.module('starter', ['ionic', 'ionic-modal-select'])\n\n```\n\nAnd you're ready to go.\n\n\n## Directives\n\n### modal-select\n\nThis directive will transform the element into a modal select: when clicking the element a select dialog will be open, with options presented in a clickable list. Once the user clicks on an option, it will be set on the bound model.\n\nFor this to work the following conditions must apply:\n\n* The element you use this directive must be clickable.\n* The directive requires ngModel to be set on the element\n* The directive expects an inner element of class \"option\" to define the options template\n\nThe final value bound to your model will be determined as follow:\n\n* if you set the attribute `option-getter` will be set as `getterFunction(selectedItem)`\n* if you set the attribute `option-property` will be set as `selectedItem[propertyName]`\n* otherwise it will be set as the full object\n\n\n#### Options\n\noption|meaning|accepted values|default\n---|---|---|---\n`options`|List of options to choose from|Array||\n`options-expression`|The expression indicating how to enumerate a the options collection, of the format `variable in expression` – where variable is the user defined loop variable and expression is a scope expression giving the collection to enumerate. For example: `album in artist.albums or album in artist.albums | orderBy:'name'`.|expression||\n`option-getter`|Optional method to get the value from the chosen item|function|not set|\n`option-property`|Optional property name to get as model value from the chosen item|string|not set|\n`modal-class`|The class for the modal (set on ``|string|''\n`selected-class`|The class applied to the currently selected option (if any) in the modal list|string|'option-selected'\n`on-select`|Callback triggered on object select. Takes two arguments, `newValue` and `oldValue` with obvious meaning.|function call with arguments `newValue` and `oldValue`|not set\n`on-reset`|Callback triggered when value is resetted using the relevant ui interface. Takes no arguments.|function call|not set\n`modal-title`|The title shown on the modal header|string|'Select an option'\n`header-footer-class`|The class for header and footer of the modal|string|'bar-stable'\n`cancel-button`|Text of the button for closing the modal without changing the value|string|'Cancel'\n`reset-button`|Text of the button for unsetting value in the modal dialog|string|'Reset'\n`hide-reset`|Hides the button for unsetting value in the modal dialog|string. Set to 'true' for hiding the button|false\n`use-collection-repeat`|Forces use of collection-repeat or ng-repeat for rendering options in the modal.| string \"true\", \"false\" | not set (automatically set according to number of options and `short-list-break` attribute)\n`short-list-break`|The maximum number of item in list to be rendered with `ng-repeat`.(if `use-collection-repeat` is not set) If the list has a number of options greater than this attribute it will be rendered with ionic `collection-repeat` directive instead. (see also `load-list-message` option)|integer|10\n`load-list-message`|Message to be shown when loading a long list of options in the modal|string|'Loading'\n`has-search`|Whether to show a search bar to filter options.|set to \"true\" for showing the search bar|undefined\n`search-placeholder`|String placeholder in search bar.|string|'Search'\n`sub-header-class`|Class to be applied to the subheader containing the search bar (makes sense only if `has-search=\"true`) |string|'bar-stable'\n`cancel-search-button`|Text for the button for clearing search text (makes sense only if `has-search=\"true`) |string|'Clear'\n`clear-search-on-select`|Tells the directive to not clear the search bar content after user selection. Set to `false` to prevent clearing the search text.|boolean|true\n`search-properties`|Array of properties for the search. For example: In your controller `$scope.searchProperties = ['property1', 'property2'];` and in template attributes `search-properties=\"searchProperties\"`|Array\n\n\n### Passing in options\n\nThe `modal-select` directive must be provided with a set of options to choose from\n\nThis can be done in two ways:\n\n* via the `options` attribute, that accepts an array of values or objects. The directive will watch for changes in this array and modify its options accordingly.\n* via the `options-expression` attribute, that accepts an expression similar to what you would use with ionic `collection-repeat` directive, of the format `variable in expression` – where variable is the user defined loop variable and expression is a scope expression giving the collection to enumerate. For example: `album in artist.albums or album in artist.albums | orderBy:'name'`. This allows you to apply ordering or filtering without acting on the original array.\n\n\n### Options templates\n\nThis directive expects to find a single inner element of class \"option\" that is used to define the template of the options that can be selected. Options will be rendered as items into a list in the modal (The content of each option, rendered with your template, is wrapped in an element of class 'item item-text wrap' and the original \".option\" element is removed).\n\nFor example:\n```html\n\n```\n\nWill be rendered in the modal as :\n\n```html\n
\n {{option}}\n
\n```\n\n\n## Search bar\nFrom version 1.1.0 you can include a search bar into the modal for filtering options by simply adding the attribute `has-search=\"true\"` to your `modal-select` element.\n\nFiltering is implemented with the angular `filter` filter, which searches recursively in all properties of the objects passed in as options. This means that you cannot search on \"computed properties\" right now. For example if you are using a custom setter you will be only able to search the original properties of the options.\n\n\n### Examples\n#### Simplest one.\nThis example shows a modal for choosing a number between 1 and 5.\n\nIn your controller:\n\n```js\n$scope.selectables = [1,2,3,4,5];\n```\nIn your template:\n\n```html\n\n```\n\n#### Including a search bar\nTo include a search bar in the previous example, just add `has-search=\"true\"`:\n\n```html\n\n```\n\n\n\n#### Objects as options\nIn the following example we use some objects as options.\n\n\nIn your controller:\n\n```js\n$scope.selectables = [\n { name: \"Mauro\", role : \"navigator\"},\n { name: \"Silvia\", role : \"chef\"},\n { name: \"Merlino\", role : \"canaglia\"}\n];\n```\n\nWe'll explore different possibilities we have with this options.\n\n##### 1. Setting the full object\n\nIf we do not set `option-getter` or `option-property` attributes, the model is assigned to the full option object when an option is selected.\n\n```html\n\n```\n\n\n\n\n##### 2. Setting a property\nIf `option-property` attribute is set to a string, the bound model assigned that property of the option object when an option is selected. For example if we set `option-getter=\"name\"`, we get back the 'name' property of our options.\n\n```html\n\n```\n\n##### 3. Custom setter\nIf a function call is passed via `option-getter` attribute, the bound model assignment is done by calling this function with the selected option as the only argument (named 'option'). For example if we do this in our controller:\n\n```javascript\n$scope.getOption = function(option){\n return option.name + \":\" + option.role;\n};\n```\n\n```html\n\n```\n\n##### 4. Specify the properties for search\nSpecify in the array the properties' name for search `$scope.search_properties = ['propertie_1', 'propertie_2', '...'];`:\n```javascript\n$scope.search_properties = ['name'];\n```\n```html\n\n```\n\nWe get back the phrase \"Mauro:navigator\", \"Silvia:chef\" or \"Merlino:canaglia\" if we click the previous defined options.\n\n\n##### More examples [on the project site](http://inmagik.github.io/ionic-modal-select).\n\n## Support this project\n\nThis software package is available for free with a MIT license, but\nif you find it useful and want support its development consider buying a copy on the [Ionic Marketplace](http://market.ionic.io/plugins/ionic-modal-select) for just a few bucks.\n","users":{"rkopylkov":true},"license":"MIT","versions":{"1.3.1-alpha.0":{"name":"ionic-modal-select","version":"1.3.1-alpha.0","description":"Modal select for ionic","scripts":{},"author":{"name":"bianchimro@gmail.com"},"license":"MIT","devDependencies":{"gulp":"^3.9.0","gulp-add-src":"^0.2.0","gulp-concat":"^2.6.0","gulp-jsify-html-templates":"^0.1.0","gulp-minify-css":"^1.2.4","gulp-order":"^1.1.1","gulp-rename":"^1.2.2","gulp-replace":"^0.5.4","gulp-uglify":"^1.3.0","jasmine-core":"^2.3.4","karma":"^0.13.15","karma-jasmine":"^0.3.6","karma-phantomjs-launcher":"^0.2.1","phantomjs":"^1.9.18"},"gitHead":"e074d3ddc9a2abbe9e099307292387e8d86a6eb9","_id":"ionic-modal-select@1.3.1-alpha.0","_shasum":"3f55eb56bfccbf71982e406b4fb98fb7f7c98fa7","_from":".","_npmVersion":"3.8.6","_nodeVersion":"5.11.1","_npmUser":{"name":"anonymous","email":"bianchimro@gmail.com"},"dist":{"shasum":"3f55eb56bfccbf71982e406b4fb98fb7f7c98fa7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/ionic-modal-select/-/ionic-modal-select-1.3.1-alpha.0.tgz","integrity":"sha512-g5PpiKWfEFMgi3MbKF+1ZBKFyjUPOlPoor/Gsx/ERIy9atHTPcg3zIcF4iYPjCiiiTzNLZ4KB+/i1KsggDxYrA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBXU61ETTBQWZ88OXMg9Z3d+JqgmqZCte8/yEMF2Lg8QIhAIxuM9BnHAYM4YnorPUV2ldWeB+8ez4Lj0aeFopOuCbM"}]},"maintainers":[{"name":"anonymous","email":"bianchimro@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/ionic-modal-select-1.3.1-alpha.0.tgz_1467639626307_0.30433971085585654"}}},"name":"ionic-modal-select","time":{"modified":"2022-06-19T02:10:32.364Z","created":"2016-07-04T13:40:28.597Z","1.3.1-alpha.0":"2016-07-04T13:40:28.597Z"},"readmeFilename":"README.md"}