When I click uncheckAll button, $scope.selectedItems is empty, but all the checkboxs are still selected. Is this because the id is not Number?
my data is like this:

$scope.data = [{
id: "234dfsdw43",
name: "name1"
},
{
id: "e4w54gr4",
name: "name2"
}]

JS:

$scope.checkAll = function() {
 $scope.selectedItems = $scope.data.map(function(item) { return item.id; });
};

$scope.uncheckAll = function() {
            $scope.selectedItems = [];
        };

HTML:

<div ng-repeat="item in data">
<input type="checkbox" checklist-model="selectedItems" checklist-value="item.id"> {{ item.name}}
 </div>
<button ng-click="checkAll()">check all</button>
<button ng-click="uncheckAll()">uncheck all</button>

When I reset model array in this way
$scope.checklist = []

Checkboxes doesn't disappear.

Hi @vitalets,

I'm trying to use your directive with angular 1.2.15 but with no success. I checked that your demo site and your code jsfiddle are referencing to angular 1.0.8. Do you know if your directive is ready for use against angular 1.2.15? or I missing something else?

Thx in advance.

here are probably the most people who know something on this.

I have an issue that my check boxes aren't being checked, but because this is probably something I did wrong I've posted it on stack overflow.

http://stackoverflow.com/questions/29749006/checklist-model-not-checking

Given:

<input type="checkbox" checklist-model="user.roles" checklist-value="someStringValue">
<input type="checkbox" checklist-model="user.roles" checklist-value="someStringValue2">

.. it should be able to handle these strings which aren't variable names. Right now, the following code returns undefined (L55):

// value added to list
var value = $parse(attrs.checklistValue)(scope.$parent);

The fix I had to put in place was this:

// value added to list
var value = $parse(attrs.checklistValue)(scope.$parent) || attrs.checklistValue;

I am getting an error.

RangeError: Maximum call stack size exceeded at join (native) while use checklist- model.

Any idea?

Thanks for the useful module.

Please use "Inline Annotation" for dependency injection: http://docs.angularjs.org/guide/di . That way minifiers will still work.

I need to create a check-list by manually setting check-value... but when i do it the behavior is very strange. THe model is not aligned with what si checked and check one cause checking all.

See this: http://plnkr.co/edit/V7U3Z1PUMqXfrirIt5kK?p=preview

Little nitpicky but would you consider renaming the bower component name to angular-checklist-model?

https://github.com/angular/angular-component-spec

If the list disappear, it is undefined. At this point, watch the line 59 will try to add a value to a variable undefined.

Should be corrected to get something like this:

 scope.$watch('checked', function(newValue, oldValue) {
 if (newValue === oldValue) {
      return;
 }
 var current = getter(scope.$parent);
 if (scope.$parent && current && value) {
      if (newValue === true) {
           setter(scope.$parent, add(current, value));
      } else {
           setter(scope.$parent, remove(current, value));
      }
 }"

See below. If colors array is ['red', 'green', 'blue'], then ticking then un-ticking red or green doesn't affect $dirty state. Only when I tick and untick blue, then required error message will show up.

<form name="myForm">
  <div class="checkbox" ng-repeat="color in colors">
      <label>
        <input type="checkbox" name="color"
              checklist-model="formData['selectedColors']" 
              checklist-value="color" 
              ng-required="formData['selectedColors'].length == 0">
              {{color}}
      </label>
  </div>
  <p class="help-block error" 
    ng-show="myForm['color'].$error.required && myForm['color'].$dirty">
    This field is required.
  </p>
</form>

http://plnkr.co/DFXIfT

I've been using checklist-model to work with an array of check-boxes with each selected one can be deleted. Everything seems to work fine until I use it inside a ng-repeat.

The problem is, the deleted check-boxes still be there around when I add the track by $index along with the ng-repeat. If I remove that track by, it works fine (but in my real app I need that track by to work).

Here's a plnkr, http://plnkr.co/edit/5082nJfGwlOZaXYb184Z?p=preview

To see the problem, you can follow these steps.

1.Select any check-box you want
2/Delete those selected ones
3.Check the check all button to see,

Now look at the one with track by $index, it will leave some check-box unchecked. If you check it manually, it will have the old value added to the list. This is weird.

There seems to be no way to make checklist-model require at least 1 checkbox to be selected.

I tried creating a checklist-required directive, but with no success as it doesn't use ngModel so I can't call ctrl.$setValidity.

I'm managing all my dependencies through npm and would be very nice to find your repo.
Please add to npm registry.

This line is throwing the 'type property can't be changed' error.
if (tElement[0].tagName !== 'INPUT' || !tElement.attr('type', 'checkbox')) { throw 'checklist-model should be applied toinput[type="checkbox"].'; }
I'm using angular 1.2.8.

If the "checklist-model" attribute receives a flat list directly from the scope (like this: checklist-model="modelList") - it will be limited: if you clear all from the controller - the UI will not be updated (checks will still be checked).

I didn't test behaviour of select all.

In order to make it work, the model list must be wrapped in an object, like this:
<input type="checkbox" checklist-model="something.list" ...

and in the controller:
scope.something = {
list: [1,2,3]
}

The setter variable is undefined in the watch when the getter is a function. This leads to the following error message in the console:

TypeError: undefined is not a function
at Object.fn (checklist-model.js:69)
at Scope.$digest (angular.js:12251)
at Scope.$apply (angular.js:12516)
at HTMLTableRowElement. (angular.js:18626)
at angular.js:2780
at forEach (angular.js:330)
at HTMLTableRowElement.eventHandler (angular.js:2779)

When using a filter eg. < div class="product-list" ng-repeat="Product in products | filter: searchText">
the check all function,
$scope.selectedProduct = $scope.products.map(function(Product) { return Product.ID; });
will check all items..including the non visual once.

Plunker: http://plnkr.co/edit/GDY9kPO6UldhteFzP7kI?p=preview
To see the issue:
Filter and then select all

And Me again !

I just want to propose a more advanced example which could expand the doc:
http://plnkr.co/edit/pZLF0KesMDnIap0eCfSG?p=preview

Please include it to the doc if you think it's useful.

It would be nice to be able to say that if an option matches a condition (like value is none) then uncheck all the other options when it is checked.

http://plnkr.co/DFXIfT

I need to show the user a checkbox, an image, and title and allow them to select as many as they choose. ie. show the user various samples of granite and a title and ask them to pick all their favorite ones.

If i need at least one checkbox to be checked, how would I go about validation? ng-required does not seem to work as usual.

Hello i've found such a bug:

this work just fine:

and this crash the application

This project is exactly what I was looking for, but it would be great if I could add it to my package.json/bower.json rather than manually including it in my project :)

hi,

I'm having trouble figuring out how to set the model to auto select when a model is loaded in, the models are like following:

$scope.group

{
    "Id": "08028136800d93f6",
    "Author": "John, Doe",
    "Name": "Test group",
    "Date": "2015-03-02T14:19:42",
    "ThumbnailUrl": null,
    "Keywords": [
        "test",
        "with keywords"
    ],
    "Videos": [
        {
            "Id": "09028136800d92b2",
            "Author": "John, Doe",
            "Title": "The Simpsons Movie trialer",
            "Genre": null,
            "version": "1.0",
            "Duration": 0,
            "Date": "2015-02-26T11:15:32",
            "ThumbnailUrl": null,
            "Keywords": [
                "testing",
                "input",
                "field",
                "simpsons",
                "movie",
                "1080p",
                "trailer"
            ],
            "ContentUrls": null,
            "Live": false,
            "ContentType": null,
            "State": 0,
        },
        {
            "Id": "09028136800d92d9",
            "Author": "John, Doe",
            "Title": "small lego movie to test",
            "Genre": null,
            "version": "1.0",
            "Duration": 0,
            "Date": "2015-02-26T14:47:56",
            "ThumbnailUrl": null,
            "Keywords": [
                "small",
                "lego",
                "movie",
                "test"
            ],
            "ContentUrls": null,
            "Live": false,
            "ContentType": null,
            "State": 0

        },
        {
            "Id": "09028136800d97b4",
            "Author": "John, Doe",
            "Title": "small.mp4",
            "Genre": null,
            "version": "1.0",
            "Duration": 0,
            "Date": "2015-03-02T09:27:18",
            "ThumbnailUrl": null,
            "Keywords": [],
            "ContentUrls": null,
            "Live": false,
            "ContentType": null,
            "State": 0
        }
    ]
}

and my $scope.videos is the same as the $scope.groups.Videos, except it contains all videos (and not only the one in the group)

The groups are created with the same form, and the $scope.group is then stringified when send, so the videos are correctly linked to $scope.group.Videos.

so, for some reason when the model is loaded again it won't check the ones in the repeat.
{{ group.Videos.length }} does return the correct amount of videos in the group, and when selecting a new one the count increases (so no reset)

form repeat:

<li class="collection-item" ng-repeat="video in filterdVideo = (videos |  filterStack : group.Videos:(query.length>0||showAll) | filter: query ) ">
    <p>
        <input type="checkbox" id="video_{{video.Id}}" checklist-model="group.Videos" checklist-value="video">
        <label for="video_{{video.Id}}">
            {{video.Title}}
        </label>
    </p>
</li>

EDIT:

don't know if important, but when doing some debugging is see that in the $scope.group.Videos contains of 3 objects (being the values in the DB / model) and 1 e (this being the one I checked)

For some reason, when I use the checklist model, everything is on one line. I have inserted
and

Current code is:

{{indType.name}}

ng-change is called before value change

If I bind it to a simple array it is not working:
$scope.SelectedItems: []
It works only with:
$scope.anything= {
SelectedItems: []
};

Am I right?
The problem is with the function:
$scope.UnCheckAll = () => {
$scope.SelectedCertificateBlocks = [];
};
it updates the model but doesn't uncheck the checkboxes

Please, add .min version of directive

If required is defined for other input field, and checklist is declared then ng-disable does not work for submit button.

This directive works well for me if I comment out the $destroy handler (source), because these lines are wiping the model whenever the checklist directives are destroyed and appear to be modifying the parent scope.

I'm not sure I understand why we would need this functionality. Am I missing something?

The directive doesn't work if the model isn't an array. The model can be an array, undefined or null

As a consequence, this cannot be used in browserify.

I am using codeSleeve minifcation for laravel4.
checklist-model fails on single checkbox select. SelectAll and unCheck all works normal.
Looks like checked=true is not being set in checklist-model on single checkbox selects.

I'm trying to use this on multiple checklists on one page. I need to save the selections of each list to localStorage. However, all of the checklist-model lists use the same ng-model name. So, it will only save all of the selections as one object.

Is there a way to change this for each list without changing checklist-model's core code?

Normally you are allowed to write attribute directives as either checklist-model or data-checklist-model to be html5 compatible. $attrs normalizes that.
However, using data-checklist-model crashes chrome in your jsfiddle example and on my local I get a recursion problem.

Edit: the problem happens only with checklist-model, not with checklist-value.

Hi again,
In case you want to make a checkAll functionality look at this plunker.
http://plnkr.co/edit/6kld8n2x7gWKgFh81sen?p=preview

With the first method :
"$scope.user.roles = $scope.roles; "
All the checkboxes are selected but when one try to deselect a checkbox, it disappears from the list.
Why ? Because after $scope.user.roles = $scope.roles;
$scope.user.roles and $scope.roles become same object !
$scope.roles is not a clone of $scope.user.roles.
So when un-checking you actually delete the element from $scope.roles.

It seems evident thereafter but if someone is facing the same issue.. it can save him time.
Thanks for this directive

As it stands, this directive doesn't work with IE8 since the code is trying to set the type of the input to a checkbox (which isn't allowed) instead of evaluating it:

if (tElement[0].tagName !== 'INPUT' || !tElement.attr('type', 'checkbox')) {

should be changed to:

if (tElement[0].tagName !== 'INPUT' || tElement.attr('type') != 'checkbox') {

Plus, it just makes more sense to evaluate the type instead of setting it.

I want to use the checklist-value option to bind the entire object. But I do not want to write my own comparator function. It would be nice to use checklist-comparator to something like this:

            <label ng-repeat="rule in c.Rules">
                <input type="checkbox" name="checkBox[]" checklist-model="c.SelectedRule" checklist-value="rule" checklist-comparator="rule.Id"> {{rule.Name}}
            </label>

Why not use isolate scope and pass in the model directly to the isolate scope? That way you wouldn't need the 'scope.$parent' workaround.

In line 82 !tElement.attr('type', 'checkbox') needs to be replaced with !(tElement.attr('type') == 'checkbox')

Following the example exactly as on the Demo site, when the checkboxes are clicked individually they do not bind to the scope. I have inspected it on the demo site with the angular inspector, on my own site (Angular 1.2.16), with in a Yo Angular app (Angular 1.2.6), with no luck. Am I incorrect to assume that the checkbox (checkbox-value) value is to bind to scope when clicked individually or does this require buttons with ng-click directives?

Hi,

In order to use checklist-model with btn-checkbox from ui-bootstrap, I had to use a forked version of checklist-model by commenting these two lines:

if (tElement[0].tagName !== 'INPUT' || tAttrs.type !== 'checkbox') {
    throw 'checklist-model should be applied to `input[type="checkbox"]`.';
}

I can confirm this works like a charm. This requirement seems a little bit excessive. Could it be improved or removed?

hi

I'm using materializecss, and there a checkbox has to have HTML like this:

<p>
    <input type="checkbox" id="test5" />
    <label for="test5">Red</label>
</p>

so the label is below the input, is it possible to use this module then?

<div ng-repeat="role in roles">
    <input type="checkbox" checklist-model="user.roles" checklist-value="role.id">
    <label>
        {{role.text}}
    </label>
</div>

wasn't sucesfull

Hi,
Would it be possible to add the possibilty to :

• uncheck elements from the controller

I have looked into the directive but it doesn't seem evident as you clone checklist-model and throw it away after.

Is it possible ?

Something similar to: http://dev.sencha.com/deploy/ext-4.0.1/examples/tree/check-tree.html