Angular Tau Utilities
Utilitis for AngularJS app
- Demo: http://sibevin.github.io/angular-tau-utils/
- Doc: http://sibevin.github.io/angular-tau-utils/doc/index.html
- Github: https://github.com/sibevin/angular-tau-utils
- Issue Report: https://github.com/sibevin/angular-tau-utils/issues
Usage
Include tau-utils
in your app dependence, then all tau modules are reday to use.
angular
Tau Modules
angular-tau-utils
is separated into different tau modules, and you can use them individually. For example, if only tau-switcher
is used, you can just add tau-switcher
in your app dependence.
angular
Here is the tua module list:
- tau-switcher
- tau-checkbox-model
tau-switcher
tau-switcher
module provides several services: TabSwitcher
, BoolSwitcher
, CycleSwitcher
and PipeSwitcher
.
TabSwitcher
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; app;
Home Product Contact Home Product Contact
BoolSwitcher
BoolSwitcher
is a simplified version of TabSwitcher
, only for handling boolean values.
var app = angular; app;
CycleSwitcher
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; app;
Previous Next Back to first Go to case2 Case1 Case2 Case3
PipeSwitcher
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; app;
Previous Next Back to step2 Go to step3 Step1 Step2 Step3 Step4
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.
tau-checkbox-model
tau-checkbox-model
module provides the CheckboxModel
service.
CheckboxModel
CheckboxModel
is a service to handle a group of checkboxes.
var app = angular; app;
Select All Unselect All Select "user" Unselect "user" {{ role }}
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
.
Development
Clone the source from the repo
git clone git@github.com:sibevin/angular-tau-utils.git
Prepare development env, install bower and npm packages
npm install
bower install
To build the source
grunt build
To test the source
grunt test
To see the coverage
grunt cov
Contributing
- Fork it ( https://github.com/sibevin/angular-tau-utils/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Write tests for your code
- Commit your changes (both code and tests) (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request
Authors
Sibevin Wang
Copyright
Copyright (c) 2014 Sibevin Wang. Released under the MIT license.