TabSwitcher is a service to handle the tab-switching. A tab can be any kinds of object, but string should be enough to handle most of usage cases.

var app = angular.module('MyApp', ["tau-switcher"]);



app.controller("MyCtrl", [

  '$scope', 'TabSwitcher', function($scope, TabSwitcher) {

    $scope.ts = new TabSwitcher("home");

  }

]);

<div class="tab-menu">
  <ul>
    <li><a herf="" ng-class="{active: ts.isTab('home')}" ng-click="ts.switch('home')">Home</a></li>
    <li><a herf="" ng-class="{active: ts.isTab('product')}" ng-click="ts.switch('product')">Product</a></li>
    <li><a herf="" ng-class="{active: ts.isTab('contact')}" ng-click="ts.setTab('contact')">Contact</a></li>
  </ul>
</div>
<div class="tab-page">
  <div ng-show="ts.isTab('home')"><h1>Home</h1></div>
  <div ng-show="ts.isTab('product')"><h1>Product</h1></div>
  <div ng-show="ts.isTab('contact')"><h1>Contact</h1></div>
</div>

BoolSwitcher is a simplified version of TabSwitcher, only for handling boolean values.

var app = angular.module('MyApp', ["tau-switcher"]);



app.controller("MyCtrl", [

  '$scope', 'BoolSwitcher', function($scope, BoolSwitcher) {

    $scope.bs = new BoolSwitcher();

  }

]);

<div class="switch-btn" ng-class="{on: bs.getBool()}" ng-click="bs.switch()">
  <div class="bar"></div>
</div>

CycleSwitcher is a service to handle a serial of ordered tabs, the difference between TabSwitcher and CycleSwitcher is CycleSwitcher must assign a tab array when creating a CycleSwitcher object, and the current tab in CycleSwitcher is switched between these tabs only.

var app = angular.module('MyApp', ["tau-switcher"]);



app.controller("MyCtrl", [

  '$scope', 'CycleSwitcher', function($scope, CycleSwitcher) {

    $scope.cs = new CycleSwitcher(["case1", "case2", "case3"]);

  }

]);

<div class="tab-menu">
  <ul>
    <li><a herf="" ng-click="cs.prev()">Previous</a></li>
    <li><a herf="" ng-click="cs.next()">Next</a></li>
    <li><a herf="" ng-click="cs.reset()">Back to first</a></li>
    <li><a herf="" ng-click="cs.setTab('case2')">Go to case2</a></li>
  </ul>
</div>
<div class="tab-page">
  <div ng-show="cs.isTab('case1')"><h1>Case1</h1></div>
  <div ng-show="cs.isTab('case2')"><h1>Case2</h1></div>
  <div ng-show="cs.isTab('case3')"><h1>Case3</h1></div>
</div>

PipeSwitcher is a service to handle a serial of ordered tabs, the difference between PipeSwitcher and CycleSwitcher is that PipeSwitcher is not cycled, i.e., when calling next() at the last tab or prev() at the first tab, nothing happened. Besides, PipeSwitcher can assign the initial tab, i.e., the initial tab can be different to the first tab.

var app = angular.module('MyApp', ["tau-switcher"]);



app.controller("MyCtrl", [

  '$scope', 'PipeSwitcher', function($scope, PipeSwitcher) {

    $scope.ps = new PipeSwitcher(["step1", "step2", "step3", "step4"], "step2");

  }

]);

<div class="tab-menu">
  <ul>
    <li><a herf="" ng-class="{disable: ps.isFirst()}" ng-click="ps.prev()">Previous</a></li>
    <li><a herf="" ng-class="{disable: ps.isLast()}" ng-click="ps.next()">Next</a></li>
    <li><a herf="" ng-click="ps.reset()">Back to step2</a></li>
    <li><a herf="" ng-click="ps.setTab('step3')">Go to step3</a></li>
  </ul>
</div>
<div class="tab-page">
  <div ng-show="ps.isTab('step1')"><h1>Step1</h1></div>
  <div ng-show="ps.isTab('step2')"><h1>Step2</h1></div>
  <div ng-show="ps.isTab('step3')"><h1>Step3</h1></div>
  <div ng-show="ps.isTab('step4')"><h1>Step4</h1></div>
</div>

Another ng-switch ?

Sometimes, I just want to show/hide some elements according to some variables, ng-switch seems overwhelming to me. On the other hand, ng-switch creates the sub-scope which may just bring troubles and redundances.

CheckboxModel is a service to handle the model used in a group of checkboxes.

var app = angular.module('MyApp', ['tau-checkbox-model']);

app.controller('MyCtrl', [
  '$scope', 'CheckboxModel', function($scope, CheckboxModel) {
    $scope.roles = ['user', 'manager', 'admin'];
    $scope.roles_m = {};
    $scope.cm = new CheckboxModel({
      cands: $scope.roles,
      model: $scope.roles_m
    });
  }
]);

<ul>
  <li><a herf="" ng-click="cm.selectAll()">Select All</a></li>
  <li><a herf="" ng-click="cm.selectAll(false)">Unselect All</a></li>
  <li><a herf="" ng-class="{disable: cm.isSelected('user')}" ng-click="cm.select('user')">Select "user"</a></li>
  <li><a herf="" ng-class="{disable: !cm.isSelected('user')}" ng-click="cm.select('user', false)">Unselect "user"</a></li>
</ul>
<div ng-repeat="role in roles">
  <input name="role" ng-model="roles_m[role]" type="checkbox" /> {{ role }}
</div>

Why not use a directive ?

Using a directive means the feature is binding with a DOM, it is not flexible and limits the usage. CheckboxModel can be applied to any kinds of checkboxes as long as they are using ng-model.