Changing the state & function of Ionic tab

I’m looking to change the color and function of a tab in a . When clicked it should initiate a function which adds an item to the native calendar (I have this working!). This should change the icons color and save that change. When clicked again it should initiate another function that deletes the item from the native calendar and change the icon back to its original color.

HTML

<ion-footer-bar>
<div>
   <ion-tabs class="tabs-light tabs-icon-top">
     <ion-tab title="Share" icon="ion-share" ng-controller="SneakEmController" ng-click="shareAnywhere()">
    </ion-tab>
    <ion-tab title="Calendar" icon="ion-ios-calendar-outline"  ng-click="createEvent()">
    </ion-tab>
    <ion-tab title="Favorite" icon="ion-android-star-outline"  ng-click="addFavorite()">
    </ion-tab>
  </ion-tabs>
</div>
</ion-footer-bar>

Javascript

 $scope.createEvent = function(){
    // Add to calendar interactively (vs silently):
     $cordovaCalendar.createEvent({
    title: $scope.release.shoetype,
    location: 'Select Locations',
    notes: $scope.release.shoename + "n$"+$scope.release.price,
    startDate: new Date($scope.release.year, $scope.release.month, $scope.release.day, 10, 0, 0, 0, 0),
    endDate: new Date($scope.release.year, $scope.release.month, $scope.release.day, 11, 0, 0, 0, 0)
  }).then(function (result) {
    // success
  }, function (err) {
    // error
  });
  }

    $scope.deleteEvent = function(){
    // Delete event:
     $cordovaCalendar.deleteEvent({
    newTitle: $scope.release.shoetype,
    location: 'Select Locations',
    notes: $scope.release.shoename + "n$"+$scope.release.price,
    startDate: new Date(2018, 0, 6, 10, 00, 0, 0, 0),
    endDate: new Date(2018, 0, 6, 11, 00, 0, 0, 0)
  }).then(function (result) {
    // success
  }, function (err) {
    // error
  });
    }

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/02/changing-the-state-function-of-ionic-tab/
via @lzomedia #developer #freelance #web #lzomedia.com