Skip to content

Commit

Permalink
readme update
Browse files Browse the repository at this point in the history
  • Loading branch information
Luxiyalu committed Dec 18, 2014
1 parent 0e91d6f commit f9f66f4
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 2 deletions.
66 changes: 66 additions & 0 deletions README.html
@@ -0,0 +1,66 @@
<h1>angular-checkbox-set</h1>

<p>Angular directive, with recursive support for multiple layers of checkboxes.</p>

<ol>
<li>The <code>checked</code> status would be stored in a unique object for each checkbox. This attribute is mandatory.</li>
<li>The <code>hook</code> and <code>hooked-to</code> attributes are optional. <code>hook</code> act as a hook, <code>hooked-to</code> hook the checkbox to the filled-in hook.</li>
<li>A checkbox could have both <code>hook</code> and <code>hooked-to</code> attributes, which means:</li>
<li>You could have as many levels of checkboxes as you like.</li>
<li>No need to initialise all the checkboxes at the same time: you could put children checkboxes inside <code>ng-if</code>s and when they come into existence, they&rsquo;ll automatically follow the status of their parent.</li>
</ol>


<h3>Install</h3>

<p><code>command
$ bower install angular-checkbox-set
</code></p>

<h3>Directive Attributes</h3>

<ol>
<li><code>hook</code>, string. <strong>Notice the single quote within double quote!</strong></li>
<li><code>hooked-to</code>, string. Same as above.</li>
<li><code>status-stored-in</code>, scope object.</li>
</ol>


<h3>Code Example</h3>

<p>```html</p>

<!-- provide a hook string for its children -->


<!-- gpObj will have a property "checked", its value would be boolean -->


<p><checkbox hook="'grandParent'" status-stored-in="gpObj"></checkbox></p>

<!-- since these two are hooked to 'grandParent' -->


<!-- 1. checking parentA would auto check these two -->


<!-- 2. unchecking parentA would auto uncheck these two -->


<!-- 3. unchecking either of these would uncheck their hook 'grandParent' -->


<!-- 4. if these two are checked, their hook 'grandParent' would be checked -->


<p><checkbox hook="'parentA'" hooked-to="'grandParent'" status-stored-in="pObjA"></checkbox>
<checkbox hook="'parentB'" hooked-to="'grandParent'" status-stored-in="pObjB"></checkbox></p>

<!-- you could link the hooks recursively, and they don't have to be placed in a inherited structure in html -->


<p><checkbox hooked-to="'parentA'" status-stored-in="cObjA1"></checkbox>
<checkbox hooked-to="'parentA'" status-stored-in="cObjA2"></checkbox>
```</p>

<p>See it in action <a href="http://luxiyalu.com/playground/checkbox/">here</a>.</p>
3 changes: 1 addition & 2 deletions README.md
Expand Up @@ -6,6 +6,7 @@ Angular directive, with recursive support for multiple layers of checkboxes.
2. The `hook` and `hooked-to` attributes are optional. `hook` act as a hook, `hooked-to` hook the checkbox to the filled-in hook.
3. A checkbox could have both `hook` and `hooked-to` attributes, which means:
4. You could have as many levels of checkboxes as you like.
5. No need to initialise all the checkboxes at the same time: you could put children checkboxes inside `ng-if`s and when they come into existence, they'll automatically follow the status of their parent.

### Install
```command
Expand All @@ -32,8 +33,6 @@ $ bower install angular-checkbox-set
<checkbox hook="'parentB'" hooked-to="'grandParent'" status-stored-in="pObjB"></checkbox>

<!-- you could link the hooks recursively, and they don't have to be placed in a inherited structure in html -->
<!-- the only thing to pay attention to is have all the checkboxes initiate at the same time (no ng-if on or above them) -->
<!-- otherwise when user already clicks on a checkbox, and causing the other to initialise, it's status could be wrong -->
<checkbox hooked-to="'parentA'" status-stored-in="cObjA1"></checkbox>
<checkbox hooked-to="'parentA'" status-stored-in="cObjA2"></checkbox>
```
Expand Down

0 comments on commit f9f66f4

Please sign in to comment.