https://github.com/ericogr/grgridboard
A svg grid board for AngularJS
https://github.com/ericogr/grgridboard
Last synced: 11 months ago
JSON representation
A svg grid board for AngularJS
- Host: GitHub
- URL: https://github.com/ericogr/grgridboard
- Owner: ericogr
- License: mit
- Created: 2015-07-12T13:49:20.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2016-01-15T01:44:57.000Z (over 10 years ago)
- Last Synced: 2025-02-20T13:01:39.767Z (over 1 year ago)
- Language: JavaScript
- Size: 46.9 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AngularJS Grid Board [](http://travis-ci.org/ericogr/grGridBoard)
With this directive, you can create a dynamic grid board. When you click on any square, it makes visible or invisible.
## Usage
1. `bower install gr-grid-board`
2. Add `grGridBoard` as a module dependency to your app.
3. Insert the `gr-grid-board` directive into your template:
```html
```
```css
.gr-grid-rect {
stroke: black;
width: 64px;
height: 64px;
rx: 8;
ry: 8;
}
.gr-grid-rect.selected {
fill: black;
}
.gr-grid-rect.unselected {
fill: white;
}
```
## Controller Example
```javascript
angular.module('testGridBoard', ["grGridBoard"])
.controller('TestGridBoardController', function($scope) {
$scope.boardValue = [
[true, false, false, false, false, false, false, false],
[false, false, false, false, false, false, false, false],
[false, false, false, false, false, false, false, false],
[false, false, false, false, false, false, false, false],
[false, false, false, false, false, false, false, false],
[false, false, false, false, false, false, false, false],
[false, false, false, false, false, false, false, false],
[false, false, false, false, false, false, false, true]
];
$scope.clickEvent = '';
$scope.clicado = function(line, column, value, countSelected, values) {
$scope.clickEvent = line + '/' + column + '/' + value + '/' + countSelected;
}
});
```
output:
