Ionic-selectbox

Ionic-selectbox

Yet another selectbox component in AngularJS 1.5 < 2, with search and grouping, to be used in Ionic framework.

Ionic selects have only one problem, they are HTML select boxes, so they look as a mobile web page component. I developed this component because in a project we were facing the problem of a huge list of records that had to be shown as a select box, but needed a search field to filter between the 3000 (or so) items, and also group them using a collapsible-like feature.

Normal AngularJS select boxes solve the listing and the grouping using ng-options, but if the option list has too many items, a normal select becomes unusable.

Found a couple of user-made solutions for this, but none of them really helped on solving our requirements, so I coded an Angular component.

How to install?

Run: bower install https://github.com/jsanta/ionic-selectbox.git

Requirements:

This selectbox uses fuzzy search, and groupBy filters from https://github.com/a8m/angular-filter
To minimize the number of watchers it also uses bindonce from https://github.com/Pasvaz/bindonce (I suspect it's not really needed).

How to use?

Import these files into your index.html file:

• lib/ionic-selectbox/css/selectComponent.css
• lib/ionic-selectbox/js/selectComponent.js

It's binded to the AngularJS module called app, so if you called your app with other name you'll have to change the name on the .js file.

Note: Instructions may be inacurate, but if you have done similar things before, or have some experience in developing using external components, it shouldn't be an issue (yeah! I know, I plan to correct this).

Full example

In your app.js file include the ionic-selectbox dependency:

angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.directives','app.services', 'ionic-selectbox'])
					

Using myCtrl as the controller (using controller as notation)

<selectbox
		   model="myCtrl.model"
		   list="myCtrl.selectList"
		   display-callback="myCtrl.displayDetail"
		   parse-data="myCtrl.parseData"
		   display-item="myCtrl.displayItem"
		   group-by="groupByAttr"
		   parse-group-key="myCtrl.parseGroup"
		   disable-if="myCtrl.operationOK"
		   place-holder="select item from list"
		   grid="true"
		   grid-display="griddisplay"
		   multiple="true"
		   ng-if="!!!myCtrl.disableSelect"

		   ></selectbox>

• model: required model in the controller.
• list: required object array. It can also be just an array of strings. Any grouping is solved using the common attributes inside the object (see group-by).
• display-callback: optional function used to parse each item on the list for displaying the data on screen.
• parse-data: optional function used to show the data when a value is selected. See the code for another way of achieving this without using a directive. If not included it uses the string representation of the object in the array ([Object object] or string_value).
• display-item: optional function used to show an item detail (when required). It uses any custom component used only to display data based on the the items attributes, like an embedded more info link.
• group-by: optional object attribute used to group items.
• parse-group-key: optional function required to parse the group key (if needed).
• disable-if: optional disables the selectbox if this value is true.
• place-holder: optional string used as title for the select list, and as the select field's placeholder.
• grid: optional boolean. If true the select items will be shown in a 3 col x n row grid display.
  IMPORTANT: Grid options are only enabled when using group-by.
• grid-display: optional (required if grid=true) string corresponding to the Angular component used to display each item in grid mode. Refer to the example to understand the component's structure.
• multiple: optional boolean. If true the selectbox will support selecting multiple options.
• ng-if: Angular ng-if (included just because...).

TODO

• Make it easier to use out of the box.
• Improve performance.

Feel free to fork, make improvements and use. Just share your findings as a pull request.