<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>Tab Bars</title>

    <link href="https://code.ionicframework.com/0.9.23/css/ionic.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/0.9.23/js/ionic.js"></script>
    <script src="https://code.ionicframework.com/0.9.23/js/angular/angular.min.js"></script>
    <script src="https://code.ionicframework.com/0.9.23/js/angular/angular-animate.min.js"></script>
    <script src="https://code.ionicframework.com/0.9.23/js/angular/angular-sanitize.min.js"></script>
    <script src="https://code.ionicframework.com/0.9.23/js/angular-ui/angular-ui-router.js"></script>
    <script src="https://code.ionicframework.com/0.9.23/js/ionic-angular.js"></script>
  </head>
  <body ng-controller="RootCtrl">
    <nav-view>

    <tabs
          animation="fade-in-out" 
          tabs-type="tabs-icon-only"
          tabs-style="tabs-positive"
          >

      <tab title="Home" icon-on="icon ion-ios7-filing" icon-off="icon ion-ios7-filing-outline" ng-controller="HomeCtrl">
        
        <header class="bar bar-header bar-positive">
          <button class="button button-clear" ng-click="newTask()">New</button>
          <h1 class="title">Tasks:</h1>
        </header>
        <content has-header="true" has-tabs="true" on-refresh="onRefresh()">

          <refresher></refresher>
          <list  on-refresh="onRefresh()" on-reorder="onReorder(el, start, end)" is-editing="isEditingItems" animation="fade-out" delete-icon="icon ion-minus-circled" reorder-icon="icon ion-navicon">
            <item ng-repeat="item in items"
            item="item"
            buttons="item.buttons"
            can-delete="true"
            can-reorder="true"
            can-swipe="true"
            on-delete="deleteItem(item)"
            ng-class="{completed: item.isCompleted}"
            >
              {{item.title}}
              <i class="{{item.icon}}"></i>
            </item>
          </list>
        </content>
      </tab>

      <tab title="About" icon-on="icon ion-ios7-clock" icon-off="icon ion-ios7-clock-outline">
        <header class="bar bar-header bar-positive">
          <h1 class="title">Deadlines</h1>
        </header>
        <content has-header="true">
          <h1>Deadlines</h1>
        </content>
      </tab>

      <tab title="Settings" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">
        <header class="bar bar-header bar-positive">
          <h1 class="title">Settings</h1>
        </header>
        <content has-header="true">
          <h1>Settings</h1>
        </content>
      </tab>
      
      <tab title="Settings" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">
        <header class="bar bar-header bar-positive">
          <h1 class="title">Settings</h1>
        </header>
        <content has-header="true">
          <h1>Settings</h1>
        </content>
      </tab>
      
      <tab title="Settings" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">
        <header class="bar bar-header bar-positive">
          <h1 class="title">Settings</h1>
        </header>
        <content has-header="true">
          <h1>Settings</h1>
        </content>
      </tab>
      
    </tabs>

    </nav-view>
    <script id="newTask.html" type="text/ng-template">
      <div id="task-view" class="modal slide-in-up" ng-controller="TaskCtrl">
        <header class="bar bar-header bar-secondary">
          <h1 class="title">New Task</h1>
          <button class="button button-clear button-primary" ng-click="close()">Done</button>
        </header>
        <main class="content padding has-header">
          <input type="text" placeholder="I need to do this...">
        </main>
      </div>
    </script>

  </body>
</html>

angular.module('ionicApp', ['ionic'])

.controller('RootCtrl', function($scope) {
  $scope.onControllerChanged = function(oldController, oldIndex, newController, newIndex) {
    console.log('Controller changed', oldController, oldIndex, newController, newIndex);
    console.log(arguments);
  };
})


.controller('HomeCtrl', function($scope, $timeout, $ionicModal, $ionicActionSheet) {
  $scope.items = [];

  $ionicModal.fromTemplateUrl('newTask.html', function(modal) {
    $scope.settingsModal = modal;
  });

  var removeItem = function(item, button) {
    $ionicActionSheet.show({
      buttons: [],
      destructiveText: 'Delete Task',
      cancelText: 'Cancel',
      cancel: function() {
        return true;
      },
      destructiveButtonClicked: function() {
        $scope.items.splice($scope.items.indexOf(item), 1);
        return true;
      }
    });
  };

  var completeItem = function(item, button) {
    item.isCompleted = true;
  };

  $scope.onReorder = function(el, start, end) {
    ionic.Utils.arrayMove($scope.items, start, end);
  };

  $scope.onRefresh = function() {
    console.log('ON REFRESH');

    $timeout(function() {
      $scope.$broadcast('scroll.refreshComplete');
    }, 1000);
  }


  $scope.removeItem = function(item) {
    removeItem(item);
  };

  $scope.newTask = function() {
    $scope.settingsModal.show();
  };

  // Create the items
  for(var i = 0; i < 25; i++) {
    $scope.items.push({
      title: 'Task ' + (i + 1),
      buttons: [{
        text: 'Done',
        type: 'button-success',
        onButtonClicked: completeItem,
      }, {
        text: 'Delete',
        type: 'button-danger',
        onButtonClicked: removeItem,
      }]
    });
  }

})

.controller('TaskCtrl', function($scope) {
  $scope.close = function() {
    $scope.modal.hide();
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.