https://github.com/caspertech/angular-enum-flag-directive
This directive can be used on multiple checkboxes to perform a bitwise comparison on a model to determine if the checkbox should be checked or not and will update the model on any change.
https://github.com/caspertech/angular-enum-flag-directive
Last synced: about 1 year ago
JSON representation
This directive can be used on multiple checkboxes to perform a bitwise comparison on a model to determine if the checkbox should be checked or not and will update the model on any change.
- Host: GitHub
- URL: https://github.com/caspertech/angular-enum-flag-directive
- Owner: CasperTech
- License: mit
- Created: 2016-01-27T15:36:31.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-01-27T15:42:18.000Z (over 10 years ago)
- Last Synced: 2025-01-11T22:21:57.636Z (over 1 year ago)
- Language: HTML
- Homepage:
- Size: 5.86 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Angular Enum Flag Directive
===========================
# Description
Flags enumerations are used for masking bit fields and doing bitwise comparisons. They are the correct design to use when multiple enumeration values can be specified at the same time.
This directive can be used on multiple checkboxes to perform a bitwise comparison on a model to determine if the checkbox should be checked or not and will update the model on any change.
# Demo
You can find a demo here: https://cdn.rawgit.com/jvdvleuten/angular-enum-flag-directive/master/demo.html
## Simple example
Consider you have the following Enum:
```javascript
var ColorEnum = Object.freeze({
RED: 1,
GREEN: 2,
BLUE: 4,
YELLOW: 8
});
```
And want to control the following model $scope.selectedColors in your controller with checkboxes:
```javascript
angular.module('MyApp').controller('MyController', ['$scope',
function ($scope) {
$scope.selectedColors = 7; // Default of RED, GREEN and BLUE
}
]);
```
Use the following HTML code (hard coded values):
```html
```
## Use the ColorEnum Object to determine the ng-enum-flag values
You can use the ColorEnum object to determine the values by using ng-enum-flag="ColorEnum.RED" when ColorEnum is available within the scope.
First define your ColorEnum in a factory so you can inject it as a singleton throughout your app:
```javascript
angular.module('MyApp').factory('ColorEnum', [
function () {
return Object.freeze({
RED: 1,
GREEN: 2,
BLUE: 4,
YELLOW: 8
});
}
]);
```
Then inject it in your controller and bind it to your scope:
```javascript
angular.module('MyApp').controller('MyController', ['$scope','ColorEnum',
function ($scope, ColorEnum) {
$scope.ColorEnum = ColorEnum;
$scope.selectedColors = 7; // Default of RED, GREEN and BLUE
}
]);
```
Use the ColorEnum object in your HTML code:
```html
```
# Installation
Include the directive in your app:
```html
```
Setup your app:
```javascript
var myApp = angular.module('MyApp', ['enumFlag']);
```
Use the ng-enum-flag attribute to indiciate the value of the option and the ng-enum-model attribute to bind to your model.
```html
```
If your enum represents a bitfield, add the ng-bitwise attribute.
```html
```