From 2ef3e1229de7e99db0118fde37cc608968d1bae5 Mon Sep 17 00:00:00 2001
From: bartsimp <ilnazgul@yahoo.com>
Date: Wed, 5 Oct 2016 12:23:21 +0200
Subject: [PATCH] add remove selection function

---
 example.html                  | 55 +++++++++++++++++++++++++++++++++++
 src/ionic-fancy-select.js     |  8 ++++-
 templates/modal-template.html |  3 +-
 3 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 example.html
diff --git a/example.html b/example.html
new file mode 100644
index 0000000..736013e
--- /dev/null
+++ b/example.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+    <title>Ionic Fancy Select Example</title>
+
+    <link href="http://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet">
+    <script src="http://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script>
+
+    <!-- cordova script (this will be a 404 during development) -->
+    <!--<script src="cordova.js"></script>-->
+
+    <script src="src/ionic-fancy-select.js" type="text/javascript"></script>
+
+  </head>
+
+<body ng-app="ionicApp">
+
+	<div ng-controller="MainCtrl">
+
+		<fancy-select
+			header-text="Select an option"
+			items="countries"
+			value="selected"
+			value-property="id"
+			text-property="id"
+			allow-empty='true'
+			multi-select="false"
+			text="{{countries_text_single}}"
+			value-changed="onValueChanged(value)"
+			get-custom-text="getCustomText(value)"
+		>
+		</fancy-select>
+
+		the selected value is {{selected}}
+	</div>
+
+<script type="text/javascript">
+angular.module('ionicApp', ['ionic', 'ionic-fancy-select'])
+.controller('MainCtrl', function($scope)
+{
+  $scope.countries = [
+    {id: 1, Name: 'USA', checked: false}, 
+    {id: 2, Name: 'France', checked: false}, 
+    {id: 3, Name: 'Japan', checked: true}];
+  
+  $scope.countries_text_single = 'Choose country';
+  $scope.val =  {single: null, multiple: null};
+});
+
+</script>
+
+</body>
+</html>
diff --git a/src/ionic-fancy-select.js b/src/ionic-fancy-select.js
index 5fda21f..5f6141b 100644
--- a/src/ionic-fancy-select.js
+++ b/src/ionic-fancy-select.js
@@ -76,7 +76,7 @@ angular.module("ionic-fancy-select", ["ionic"])
 
       } else {
         scope.modal = $ionicModal.fromTemplate(
-          '<ion-modal-view> <ion-header-bar class="bar-positive"> <button class="button button-positive button-icon ion-ios-arrow-back" ng-click="hideItems()"/> <h1 class="title">{{headerText}}</h1> <button class="button button-positive button-icon ion-checkmark" ng-show="multiSelect" ng-click="validate()"/> </ion-header-bar> <ion-content> <ion-list> <ion-item class="item-checkbox" ng-if="multiSelect" ng-repeat="item in items"> <label class="checkbox"> <input type="checkbox" ng-checked="item.checked" ng-model="item.checked"> </label>{{item.Name}}</ion-item> <label class="item" ng-click="validate(item)" ng-if="!multiSelect" ng-repeat="item in items">{{item.Name}}</label> </div></ion-content></ion-modal-view>',
+          '<ion-modal-view> <ion-header-bar class="bar-positive"> <button class="button button-positive button-icon ion-ios-arrow-back" ng-click="hideItems()"/> <h1 class="title">{{headerText}}</h1> <button class="button button-positive button-icon ion-checkmark" ng-if="multiSelect" ng-click="validate()"/> <button class="button button-positive button-icon ion-backspace" ng-if="!multiSelect && allowEmpty" ng-click="removeSelection()" /> </ion-header-bar> <ion-content> <ion-list> <ion-item class="item-checkbox" ng-if="multiSelect" ng-repeat="item in items"> <label class="checkbox"> <input type="checkbox" ng-checked="item.checked" ng-model="item.checked"> </label>{{item.Name}}</ion-item> <label class="item" ng-click="validate(item)" ng-if="!multiSelect" ng-repeat="item in items">{{item.Name}}</label> </div></ion-content></ion-modal-view>',
           {
             scope: scope,
             animation: scope.modalAnimation
@@ -192,6 +192,12 @@ angular.module("ionic-fancy-select", ["ionic"])
         scope.hideItems();
       };
       
+      scope.removeSelection = function() {
+	      scope.text = scope.defaultText;
+	      delete scope.value;
+	      scope.hideItems();
+      };
+
       // Watch the value property, as this is used to build the text
       scope.$watch(function(){return scope.value;}, scope.onValueChanged, true);
     }
diff --git a/templates/modal-template.html b/templates/modal-template.html
index ac77e76..f6e293e 100644
--- a/templates/modal-template.html
+++ b/templates/modal-template.html
@@ -2,7 +2,8 @@
   <ion-header-bar class="bar-positive">
     <button class="button button-positive button-icon ion-ios-arrow-back" ng-click="hideItems()" />
     <h1 class="title">{{headerText}}</h1>
-    <button class="button button-positive button-icon ion-checkmark" ng-show="multiSelect" ng-click="validate()" />
+    <button class="button button-positive button-icon ion-checkmark" ng-if="multiSelect" ng-click="validate()" />
+    <button class="button button-positive button-icon ion-backspace" ng-if="!multiSelect && allowEmpty" ng-click="removeSelection()" />
   </ion-header-bar>
   
   <ion-content>
