vitalets/checklist-model is a HTML project with 1.1k stars. AngularJS directive for list of checkboxes
Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.
WHY NO REVIEW YET
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.
In Angular one checkbox <input type="checkbox" ng-model="..."> is linked
with one model.
But in practice we usually want one model to store array of checked values
from several checkboxes. Checklist-model solves that task without additional code in controller.
Live demo
http://vitalets.github.io/checklist-model
Installation
Note: since version 1.0.0 you must install the angular library yourself as it is now a peerDependency
Download package:
From npm npm install checklist-model
From bower bower install checklist-model
From latest release
Include script to the HTML:
<script src='checklist-model.js'></script>
Add to app dependencies:
var app = angular.module("app", ["checklist-model"]);
Usage
You should play with attributes of <input> tag:
Attribute
Mandatory
Description
checklist-model
Yes
Use instead of ng-model
checklist-value
No
What should be picked as array item
value
No
What should be picked as item, but unlike checklist-value, this does not evaluate as an angular expression, but rather a static value
ng-model
No
Every checkbok will span a new scope and define a variable named checked to hold its state. You can modify this name by using this attribute.
checklist-comparator
No
A custom comparator. If it starts with dot(.) then it will be an expression applied to the array item. Otherwise it should evaluate to a function as an angular expression. The function return true if the first two arguments are equal and false otherwise.
checklist-before-change
No
An angular expression evaluated each time before the checklist-model has changed. If it evaluates to 'false' then the model will not change anymore.
checklist-change
No
An angular expression evaluated each time the checklist-model has changed.
If you modify directly the value of the checklist-model, it is possible that the UI won't be updated. This is because this directive looks for the model in the parent, not in the current scope. Instead of doing checklistModelList = [] you should do checklistModelList.splice(0, checklistModelList.length) or wrap it in another object. Consequently, instead of doing checklistModelList = angular.copy(allValues) you should do checklistModelList.push.apply(checklistModelList, allValues). The idea is to use the same array and not replace it with a new one.
If you're using track by you must specify the same thing for checklist-value too. See #46.
If you're also using ngModel, please keep in mind that the state of the checkbok is initialized with the value from checklistModel, not with the one from ngModel. Afterwards the two will be kept in sync, but initially, these two can be conflicting, so only checklistModel is used. See the entire discussion at #104.
Examples
JsFiddle basic example (use this to report any issue): http://jsfiddle.net/beradrian/fjoLy5sq/
Ask a question on StackOverflow and tag it with checklist-model.
Fill in an issue.
Please keep in mind to also add a Plunkr or JSFiddle example. This will greatly help us in assisting you and you can use one of the existing examples and fork it.
Development
How to run tests
Generate live demo index.html via grunt jade
Run local http server grunt server
Open in browser http://localhost:8000 to check that demo is accessible
Open in browser http://localhost:8000/test and wait until all tests pass
How to add a new test case
Create a new folder under docs/blocks named your-test.
Create under that folder ctrl.js to describe the test Angular controller, view.html to describe the view part in HTML and test.js for the Angular scenario test. You can use an existing test as an example.
Add a line like - items.push({id: 'your-test', text: 'Your test, ctrlName: 'CtrlTestName', testValue: 'selectedItems'}) to docs/index.jade
Add a line like <script src="../docs/blocks/your-test/test.js"></script> to test\index.html
Run grunt jade to generate index.html from docs/index.jade
Run grunt server
Access http://localhost:8000 for samples and http://localhost:8000/test for running the tests.
How to make a new release
Change the version number in package.json, bower.json and checklist-model.nuspec (if not already changed - check the version number against the latest release in Github)
Create a new release in github with the same name for tag and title as the version number (e.g. 1.0.0). Do not forget to include the changelog in the release description.
TopGit's last sync did not record any GitHub topics for vitalets/checklist-model. GitHub topics appear in the right sidebar of a repository page; that's the authoritative place to check.
How active is development on vitalets/checklist-model?
The most recent commit recorded on vitalets/checklist-model was 8.4 years ago, based on the GitHub push timestamp. The repository has 203 forks — one of the better signals of community interest.
How many stars does vitalets/checklist-model have?
vitalets/checklist-model has 1.1k GitHub stars — refresh the page for the live number, or check github.com/vitalets/checklist-model. TopGit mirrors GitHub's count but does not claim minute-by-minute accuracy.
What language is vitalets/checklist-model written in?
vitalets/checklist-model is written primarily in HTML. GitHub's language field is based on the largest share of bytes in the default branch.
What license does vitalets/checklist-model use?
vitalets/checklist-model is released under the MIT license. Always verify the LICENSE file directly on GitHub for the authoritative terms — license strings can be edited out of sync with a project's actual stance.
Where can I see vitalets/checklist-model in action?
The project maintains a homepage at http://vitalets.github.io/checklist-model. The README tab on this page also usually contains screenshots and a quickstart.
Where do I read more about vitalets/checklist-model?
This TopGit page is a snapshot — the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/vitalets/checklist-model is the definitive source.
Read full README in the tab above.
Is checklist-model worth your time?
ChatGPT, Claude and Perplexity can all read this page. Ask one of them what it makes of checklist-model.
