{"id":21015493,"url":"https://github.com/ericogr/grgridboard","last_synced_at":"2025-07-25T01:07:28.682Z","repository":{"id":58240759,"uuid":"38963516","full_name":"ericogr/grGridBoard","owner":"ericogr","description":"A svg grid board for AngularJS","archived":false,"fork":false,"pushed_at":"2016-01-15T01:44:57.000Z","size":48,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-20T13:01:39.767Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"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/ericogr.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":"2015-07-12T13:49:20.000Z","updated_at":"2016-06-16T14:25:32.000Z","dependencies_parsed_at":"2022-08-31T09:40:24.276Z","dependency_job_id":null,"html_url":"https://github.com/ericogr/grGridBoard","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericogr%2FgrGridBoard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericogr%2FgrGridBoard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericogr%2FgrGridBoard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericogr%2FgrGridBoard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ericogr","download_url":"https://codeload.github.com/ericogr/grGridBoard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243446462,"owners_count":20292401,"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-19T10:09:58.960Z","updated_at":"2025-03-13T16:42:23.947Z","avatar_url":"https://github.com/ericogr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AngularJS Grid Board [![Build Status](https://travis-ci.org/ericogr/grGridBoard.svg?branch=master)](http://travis-ci.org/ericogr/grGridBoard)\n\nWith this directive, you can create a dynamic grid board. When you click on any square, it makes visible or invisible.\n\n## Usage\n1. `bower install gr-grid-board`\n2. Add `grGridBoard` as a module dependency to your app.\n3. Insert the `gr-grid-board` directive into your template:\n\n```html\n    \u003cgr-grid-board\n      id=\"board1\"\n      values=\"boardValue\"\n      on-click=\"clicado(line, column, value, countSelected, values)\"\n      count-selected=\"count\" \n      rows=\"{{boardRows}}\"\n      columns=\"{{boardCols}}\"\n      width=\"512\"\n      height=\"512\"\u003e\n    \u003c/gr-grid-board\u003e\n```\n\n```css\n    .gr-grid-rect {\n      stroke: black;\n      width: 64px;\n      height: 64px;\n      rx: 8;\n      ry: 8;\n    }\n\n    .gr-grid-rect.selected {\n      fill: black;\n    }\n\n    .gr-grid-rect.unselected {\n      fill: white;\n    }\n```\n\n## Controller Example\n\n```javascript\nangular.module('testGridBoard', [\"grGridBoard\"])\n\t.controller('TestGridBoardController', function($scope) {\n\t\t$scope.boardValue = [\n\t\t\t[true, false, false, false, false, false, false, false],\n\t\t\t[false, false, false, false, false, false, false, false],\n\t\t\t[false, false, false, false, false, false, false, false],\n\t\t\t[false, false, false, false, false, false, false, false],\n\t\t\t[false, false, false, false, false, false, false, false],\n\t\t\t[false, false, false, false, false, false, false, false],\n\t\t\t[false, false, false, false, false, false, false, false],\n\t\t\t[false, false, false, false, false, false, false, true]\n\t\t];\n\n\t\t$scope.clickEvent = '';\n\n\t\t$scope.clicado = function(line, column, value, countSelected, values) {\n\t\t\t$scope.clickEvent = line + '/' + column + '/' + value + '/' + countSelected;\n\t\t}\n\t});\n```\n\noutput:\n\n![alt tag](https://raw.githubusercontent.com/ericogr/grGridBoard/master/docs/grid-01.png \"grid board 8x8 example\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericogr%2Fgrgridboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fericogr%2Fgrgridboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericogr%2Fgrgridboard/lists"}