Angular directive, with recursive support for multiple layers of checkboxes.
checkedstatus would be stored in a unique object for each checkbox. This attribute is mandatory.
hooked-toattributes are optional.
hookact as a hook,
hooked-tohook the checkbox to the filled-in hook.
- A checkbox could have both
hooked-toattributes, which means:
- You could have as many levels of checkboxes as you like.
$ bower install angular-checkbox-set
hook, string. Notice the single quote within double quote!
hooked-to, string. Same as above.
status-stored-in, scope object.
<!-- provide a hook string for its children --> <!-- gpObj will have a property "checked", its value would be boolean --> <checkbox hook="'grandParent'" status-stored-in="gpObj"></checkbox> <!-- 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 --> <checkbox hook="'parentA'" hooked-to="'grandParent'" status-stored-in="pObjA"></checkbox> <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>
See it in action here.