{"id":19908979,"url":"https://github.com/caspertech/angular-enum-flag-directive","last_synced_at":"2025-03-01T08:18:13.160Z","repository":{"id":77804408,"uuid":"50517424","full_name":"CasperTech/angular-enum-flag-directive","owner":"CasperTech","description":"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.","archived":false,"fork":false,"pushed_at":"2016-01-27T15:42:18.000Z","size":6,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-11T22:21:57.636Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CasperTech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-27T15:36:31.000Z","updated_at":"2019-08-12T02:11:38.000Z","dependencies_parsed_at":"2023-02-25T21:15:18.953Z","dependency_job_id":null,"html_url":"https://github.com/CasperTech/angular-enum-flag-directive","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CasperTech%2Fangular-enum-flag-directive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CasperTech%2Fangular-enum-flag-directive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CasperTech%2Fangular-enum-flag-directive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CasperTech%2Fangular-enum-flag-directive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CasperTech","download_url":"https://codeload.github.com/CasperTech/angular-enum-flag-directive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241335704,"owners_count":19946105,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T21:14:03.500Z","updated_at":"2025-03-01T08:18:13.134Z","avatar_url":"https://github.com/CasperTech.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"Angular Enum Flag Directive\n===========================\n\n# Description\n\nFlags 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.\nThis 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.\n\n# Demo\n\nYou can find a demo here: https://cdn.rawgit.com/jvdvleuten/angular-enum-flag-directive/master/demo.html\n\n## Simple example\n\nConsider you have the following Enum:\n\n```javascript\nvar ColorEnum = Object.freeze({\n\t\tRED: 1, \n\t\tGREEN: 2, \n\t\tBLUE: 4,\n\t\tYELLOW: 8\n\t});\n```\n\nAnd want to control the following model \u003ci\u003e$scope.selectedColors\u003c/i\u003e in your controller with checkboxes:\n\n```javascript\nangular.module('MyApp').controller('MyController', ['$scope',\n    function ($scope) {\n\t\t$scope.selectedColors = 7; // Default of RED, GREEN and BLUE\n\t}\n]);\n```\n\nUse the following HTML code (hard coded values):\n\n```html\n\u003cinput name=\"RED\" type=\"checkbox\" ng-enum-flag=\"1\" ng-enum-model=\"selectedColors\"  /\u003e\n\u003cinput name=\"GREEN\" type=\"checkbox\" ng-enum-flag=\"2\" ng-enum-model=\"selectedColors\" /\u003e\n\u003cinput name=\"BLUE\" type=\"checkbox\" ng-enum-flag=\"4\" ng-enum-model=\"selectedColors\" /\u003e\n\u003cinput name=\"YELLOW\" type=\"checkbox\" ng-enum-flag=\"8\" ng-enum-model=\"selectedColors\" /\u003e\n```\n\n## Use the ColorEnum Object to determine the \u003ci\u003eng-enum-flag\u003c/i\u003e values\n\nYou can use the ColorEnum object to determine the values by using \u003ci\u003eng-enum-flag=\"ColorEnum.RED\"\u003c/i\u003e when ColorEnum is available within the scope.\n\nFirst define your ColorEnum in a factory so you can inject it as a singleton throughout your app:\n\n```javascript\nangular.module('MyApp').factory('ColorEnum', [\n    function () {\n        return Object.freeze({\n\t\t\tRED: 1, \n\t\t\tGREEN: 2, \n\t\t\tBLUE: 4,\n\t\t\tYELLOW: 8\n\t\t});\n    }\n]);\n```\n\nThen inject it in your controller and bind it to your scope:\n\n```javascript\nangular.module('MyApp').controller('MyController', ['$scope','ColorEnum',\n    function ($scope, ColorEnum) {\n\t\t$scope.ColorEnum = ColorEnum;\n\t\t$scope.selectedColors = 7; // Default of RED, GREEN and BLUE\n\t}\n]);\n```\n\nUse the ColorEnum object in your HTML code:\n\n```html\n\u003cinput name=\"RED\" type=\"checkbox\" ng-enum-flag=\"ColorEnum.RED\" ng-enum-model=\"selectedColors\"  /\u003e\n\u003cinput name=\"GREEN\" type=\"checkbox\" ng-enum-flag=\"ColorEnum.GREEN\" ng-enum-model=\"selectedColors\" /\u003e\n\u003cinput name=\"BLUE\" type=\"checkbox\" ng-enum-flag=\"ColorEnum.BLUE\" ng-enum-model=\"selectedColors\" /\u003e\n\u003cinput name=\"YELLOW\" type=\"checkbox\" ng-enum-flag=\"ColorEnum.YELLOW\" ng-enum-model=\"selectedColors\" /\u003e\n```\n\n\n# Installation\n\nInclude the directive in your app:\n\n```html\n\u003cscript src=\"angular-enum-flag-directive-min.js\"\u003e\u003c/script\u003e\n```\n\nSetup your app:\n\n```javascript\nvar myApp = angular.module('MyApp', ['enumFlag']);\n```\n\nUse the \u003ci\u003eng-enum-flag\u003c/i\u003e attribute to indiciate the value of the option and the \u003ci\u003eng-enum-model\u003c/i\u003e attribute to bind to your model.\n\n```html\n\u003cinput type=\"checkbox\" ng-enum-flag=\"1\" ng-enum-model=\"selectedValues\" /\u003e\n\u003cinput type=\"checkbox\" ng-enum-flag=\"2\" ng-enum-model=\"selectedValues\" /\u003e\n\u003cinput type=\"checkbox\" ng-enum-flag=\"4\" ng-enum-model=\"selectedValues\" /\u003e\n```\n\nIf your enum represents a bitfield, add the \u003ci\u003eng-bitwise\u003c/i\u003e attribute.\n\n```html\n\u003cinput type=\"checkbox\" ng-enum-flag=\"1\" ng-enum-model=\"selectedValues\" ng-bitwise=\"true\" /\u003e\n\u003cinput type=\"checkbox\" ng-enum-flag=\"2\" ng-enum-model=\"selectedValues\" ng-bitwise=\"true\" /\u003e\n\u003cinput type=\"checkbox\" ng-enum-flag=\"4\" ng-enum-model=\"selectedValues\" ng-bitwise=\"true\" /\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaspertech%2Fangular-enum-flag-directive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaspertech%2Fangular-enum-flag-directive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaspertech%2Fangular-enum-flag-directive/lists"}