Skip to content

Instantly share code, notes, and snippets.

@soham2008xyz

soham2008xyz/Cool Select with ionic.markdown

Created October 2, 2015 01:59
Show Gist options
  • Save soham2008xyz/9b7e03ee14ebd3afe302 to your computer and use it in GitHub Desktop.
Save soham2008xyz/9b7e03ee14ebd3afe302 to your computer and use it in GitHub Desktop.
Download ZIP
Cool Select with ionic
Raw
index.html
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Multi select</title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js">
</script>
</head>
<body>
<ion-header-bar class="bar-positive">
<h1 class="title">Fancy Select</h1>
</ion-header-bar>
<ion-nav-view animation="slide-left-right">
</ion-nav-view>
<script id="form.html" type="text/ng-template">
<ion-view>
<ion-content>
<fancy-select
header-text="Single"
allow-empty='false'
value="val.single"
text="countries_text_single"
items="countries">
</fancy-select>
<fancy-select
header-text="Multiple"
allow-empty='false'
value="val.multiple"
text="countries_text_multiple"
items="countries"
multi-select="true"
>
</fancy-select>
</ion-content>
</ion-view>
</script>
<script id="fancy-select.html" type="text/ng-template">
<ion-list>
<ion-item class="item-text-wrap" ng-click="showItems($event)">
{{text}}
<span class="item-note">
{{noteText}}
<img class="{{noteImgClass}}" ng-if="noteImg != ''" src="{{noteImg}}" />
</span>
</ion-item>
</ion-list>
</script>
<script id="fancy-select-items.html" type="text/ng-template">
<ion-view class="fancy-select-items modal">
<ion-header-bar class="bar-positive">
<button ng-click="hideItems()" class="button button-positive button-icon ion-ios7-arrow-back"></button>
<h1 class="title">{{headerText}}</h1>
<button ng-click="validate()" class="button button-positive button-icon ion-checkmark"></button>
</ion-header-bar>
<ion-content>
<div class="list">
<!-- Multi select -->
<ion-toggle
ng-repeat="item in items"
ng-if="multiSelect"
ng-checked="item.checked"
ng-model="item.checked"
class="item item-text-wrap">
<div class="fancy-select-icon" ng-if="item.icon != null">
<img src="{{item.icon}}" />
</div>
{{item.text}}
</ion-toggle>
<!-- Single select -->
<label
ng-repeat="item in items"
ng-if="!multiSelect"
class="item item-text-wrap"
ng-click='validateSingle(item)'>
<div class="fancy-select-icon" ng-if="item.icon != null">
<i class="icon-{{item.text}}" style="background-image: url({{item.icon}})"></i>
</div>
{{item.text}}
</label>
</div>
</ion-content>
</ion-view>
</script>
</body>
</html>
Raw
script.js
angular.module('ionicApp', ['ionic']).directive('fancySelect',
[
'$ionicModal',
function($ionicModal) {
return {
/* Only use as <fancy-select> tag */
restrict : 'E',
/* Our template */
templateUrl: 'fancy-select.html',
/* Attributes to set */
scope: {
'items' : '=', /* Items list is mandatory */
'text' : '=', /* Displayed text is mandatory */
'value' : '=', /* Selected value binding is mandatory */
'callback' : '&'
},
link: function (scope, element, attrs) {
/* Default values */
scope.multiSelect = attrs.multiSelect === 'true' ? true : false;
scope.allowEmpty = attrs.allowEmpty === 'false' ? false : true;
/* Header used in ion-header-bar */
scope.headerText = attrs.headerText || '';
/* Text displayed on label */
// scope.text = attrs.text || '';
scope.defaultText = scope.text || '';
/* Notes in the right side of the label */
scope.noteText = attrs.noteText || '';
scope.noteImg = attrs.noteImg || '';
scope.noteImgClass = attrs.noteImgClass || '';
/* Optionnal callback function */
// scope.callback = attrs.callback || null;
/* Instanciate ionic modal view and set params */
/* Some additionnal notes here :
*
* In previous version of the directive,
* we were using attrs.parentSelector
* to open the modal box within a selector.
*
* This is handy in particular when opening
* the "fancy select" from the right pane of
* a side view.
*
* But the problem is that I had to edit ionic.bundle.js
* and the modal component each time ionic team
* make an update of the FW.
*
* Also, seems that animations do not work
* anymore.
*
*/
$ionicModal.fromTemplateUrl(
'fancy-select-items.html',
{'scope': scope}
).then(function(modal) {
scope.modal = modal;
});
/* Validate selection from header bar */
scope.validate = function (event) {
// Construct selected values and selected text
if (scope.multiSelect == true) {
// Clear values
scope.value = '';
scope.text = '';
// Loop on items
jQuery.each(scope.items, function (index, item) {
if (item.checked) {
scope.value = scope.value + item.id+';';
scope.text = scope.text + item.text+', ';
}
});
// Remove trailing comma
scope.value = scope.value.substr(0,scope.value.length - 1);
scope.text = scope.text.substr(0,scope.text.length - 2);
}
// Select first value if not nullable
if (typeof scope.value == 'undefined' || scope.value == '' || scope.value == null ) {
if (scope.allowEmpty == false) {
scope.value = scope.items[0].id;
scope.text = scope.items[0].text;
// Check for multi select
scope.items[0].checked = true;
} else {
scope.text = scope.defaultText;
}
}
// Hide modal
scope.hideItems();
// Execute callback function
if (typeof scope.callback == 'function') {
scope.callback (scope.value);
}
}
/* Show list */
scope.showItems = function (event) {
event.preventDefault();
scope.modal.show();
}
/* Hide list */
scope.hideItems = function () {
scope.modal.hide();
}
/* Destroy modal */
scope.$on('$destroy', function() {
scope.modal.remove();
});
/* Validate single with data */
scope.validateSingle = function (item) {
// Set selected text
scope.text = item.text;
// Set selected value
scope.value = item.id;
// Hide items
scope.hideItems();
// Execute callback function
if (typeof scope.callback == 'function') {
scope.callback (scope.value);
}
}
}
};
}
]
)
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('form', {
url: "/form",
templateUrl: "form.html",
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise("/form");
})
.controller('MainCtrl', function($scope) {
$scope.countries = [
{id: 1, text: 'USA', checked: false, icon: null},
{id: 2, text: 'France', checked: false, icon: 'https://www.zeendoc.com/wp-content/themes/zeendoc/img/french_flag_small.jpg'},
{id : 3, text: 'Japan', checked: true, icon: null}];
$scope.countries_text_single = 'Choose country';
$scope.countries_text_multiple = 'Choose countries';
$scope.val = {single: null, multiple: null};
});
Raw
style.css
fancy-select .list {
margin: -1px 0; }
/* Items */
/* line 13, ../scss/modules/_fancy-select.scss */
.fancy-select-items {
position: fixed;
left: 0;
width: 100%;
height: 100%; }
/* line 19, ../scss/modules/_fancy-select.scss */
.fancy-select-items .item {
overflow: hidden;
/* Clearfix */ }
/* line 24, ../scss/modules/_fancy-select.scss */
.fancy-select-items label p {
height: 32px;
line-height: 32px; }
/* line 29, ../scss/modules/_fancy-select.scss */
.fancy-select-icon {
float: left;
margin-right: 10px;
width: 30px;
text-align: center; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment