A list UI to select / tick one or multiple items.
Created
April 4, 2015 22:46
-
-
Save ramanan12345/943bfed82fed586af3e5 to your computer and use it in GitHub Desktop.
Ionic Tick List
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html ng-app="ionicApp"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| <title>Ionic Tick List</title> | |
| <link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet"> | |
| <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script> | |
| <script src="app.js"></script> | |
| </head> | |
| <body > | |
| <ion-header-bar class="bar-positive"> | |
| <h1 class="title">Ionic Tick List</h1> | |
| </ion-header-bar> | |
| <ion-content> | |
| <h2>Select Multiple Items</h2> | |
| <div ng-controller="List1Ctrl"> | |
| <!-- Allow multiple selections and overwrite the default checkmark icon --> | |
| <tick-list multiple="true" selected-icon="ion-checkmark-circled"> | |
| <tick-list-item ng-repeat="item in items" selected="{{item.selected}}" selected-icon="{{item.icon}}" model="item" on-change="onItemChanged(item)">{{item.label}}</tick-list-item> | |
| </tick-list> | |
| </div> | |
| <br> | |
| <h2>Select Single Item</h2> | |
| <div ng-controller="List2Ctrl"> | |
| <tick-list> | |
| <tick-list-item ng-repeat="item in items" selected="{{item.selected}}" selected-icon="{{item.selectedIcon}}" model="item" on-change="onItemChanged(item)"> | |
| <div class="item-icon-left"> | |
| <i class="icon {{item.icon}}"></i>{{item.label}}</div> | |
| </tick-list-item> | |
| </tick-list> | |
| <button class="button button-positive" ng-click="onOk()">OK</button> | |
| </div> | |
| </ion-content> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('ionicApp', ['ionic']) | |
| .controller('List1Ctrl', function ($scope) { | |
| $scope.items = [ | |
| {label: 'Item1', selected: true, icon: 'ion-checkmark'}, | |
| {label: 'Item2'}, | |
| {label: 'Item3'}, | |
| {label: 'Item4', selected: true}, | |
| {label: 'Item5', selected: true}, | |
| {label: 'Item6'} | |
| ]; | |
| $scope.onItemChanged = function (item) { | |
| console.log('item changed', item); | |
| }; | |
| }) | |
| .controller('List2Ctrl', function ($scope) { | |
| $scope.items = [ | |
| {label: 'Item1', selected: true, icon: 'ion-leaf'}, | |
| {label: 'Item2', selectedIcon: 'ion-loading-b', icon: 'ion-disc'}, | |
| {label: 'Item3', icon: 'ion-bug'}, | |
| {label: 'Item4', icon: 'ion-game-controller-b'}, | |
| {label: 'Item5', icon: 'ion-umbrella'}, | |
| {label: 'Item6', icon: 'ion-lightbulb'}, | |
| {label: 'Item7', icon: 'ion-jet'}, | |
| {label: 'Item8', icon: 'ion-mic-c'}, | |
| ]; | |
| $scope.onOk = function () { | |
| console.log($scope.items); | |
| }; | |
| }) | |
| // ******************************************************** | |
| // * TickList * | |
| // ******************************************************** | |
| .directive('tickList', function () { | |
| return { | |
| restrict: 'E', | |
| transclude: true, | |
| template: '<ul class="list" ng-transclude></ul>', | |
| scope: { | |
| multiple: '@', | |
| selectedIcon: '@', | |
| $onChange: '&onChange' | |
| }, | |
| controller: ['$scope', function ($scope) { | |
| var items = $scope.items = []; | |
| this.scope = $scope; | |
| this.addItem = function (item) { | |
| items.push(item); | |
| }; | |
| this.selectItem = function (item) { | |
| $scope.$apply(function () { | |
| if ($scope.multiple) { | |
| item.$select(!item.model.selected); | |
| } else { | |
| var i, l = items.length; | |
| for (i = 0; i < l; ++i) { | |
| items[i].$select(false); | |
| } | |
| item.$select(true); | |
| } | |
| }); | |
| } | |
| }] | |
| } | |
| }) | |
| .directive('tickListItem', ['$ionicGesture', function ($ionicGesture) { | |
| return { | |
| restrict: 'E', | |
| require: '^tickList', | |
| transclude: true, | |
| scope: { | |
| selected: '@', | |
| $onChange: '&onChange', | |
| selectedIcon: '@', | |
| model: '=' | |
| }, | |
| template: '<li class="item item-icon-right" ><div ng-transclude></div><i ng-show="selected" class="icon"></i></li>', | |
| link: function (scope, element, attrs, tickListCtrl) { | |
| function tap() { | |
| tickListCtrl.selectItem(scope); | |
| } | |
| scope.$select = function (value) { | |
| var val = scope.model.selected; | |
| scope.selected = value; | |
| if (scope.model) scope.model.selected = value; | |
| if (val != value) scope.$onChange(scope.model); | |
| }; | |
| if (!scope.model) { | |
| scope.model = {selected: scope.selected == 'true'}; | |
| } | |
| //set selected icon: defined in: tickListItem -> tickList -> default | |
| element.find('i').addClass(scope.selectedIcon || tickListCtrl.scope.selectedIcon || 'ion-checkmark'); | |
| tickListCtrl.addItem(scope); | |
| $ionicGesture.on('tap', tap, element); | |
| } | |
| } | |
| }]); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| cursor: url('http://ionicframework.com/img/finger.png'), auto; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment