angular-formly multiCheckbox Select All

Question

I have a multiselect field in angular-formly, with the following options:

vm.fields = [
    {
    key: 'fruits',
    type: 'multiCheckbox',
    className: 'multi-check',
    templateOptions: {
        label: 'Fruits:',
        options: [
            {
                "name": "ALL",
                "value":"ALL"
            },

            {
                "name": "apple",
                "value":"apple"
            },
            {
                "name": "orange",
                "value":"orange"
            },
            {
                "name": "pear",
                "value":"pear"
            },
            {
                "name": "blueberry",
                "value":"blueberry"
            },
        ],
    },

  },

];

When I select/unselect "ALL", I want all the options to be selected/unselected. For Example. If ALL is checked, then all the fruits options( apple, orange, pear, blueberry) should be checked as well

If I unselect ALL, then none of the fruit options should be checked.

How do I enable this behavior in angular-formly?

Here is the link to jsbin: https://jsbin.com/xololi/edit?html,js,output

user_2703903 · Answer

Do you have any solution how to add defaultValue to multiCheckbox. I can add it and see it in model but on view (html) it is not displayed. I'we made example on jsbin where I have all types of fields and also multiCheckbox... jsbin example Thanks.

user_3244064 · Answer

here is another working solution (actually updated ckniffty's code), which binds ng-click to formly multi checkbox field and then calls function in controller:

        ....
        ngModelElAttrs: {
          "ng-click": "update(this.option.value)"
        },
        controller: function ($scope) {
          $scope.update = function (val) {
            var all = 'ALL',
              // field key
              key = $scope.options.key,
              // if true - current checkbox is selected, otherwise - unselected
              selected = $scope.model[key].indexOf(val) !== -1,
              // index of 'ALL' checkbox within model array
              indexOfAll = $scope.model[key].indexOf(all);

            // 'ALL' checkbox clicked
            if (val === all) {
              // on select - select all checkboxes, on unselect - unselect all checkboxes
              $scope.options.value(selected ? $scope.to.options.map(function (option) {
                return option.value;
              }) : []);
            }
            // other then 'ALL' checkbox unselected, while 'ALL' is selected
            else if (!selected && indexOfAll !== -1) {
              // unselect 'ALL' checkbox
              $scope.model[key].splice(indexOfAll, 1);
            }
            // all checkboxes selected except of 'ALL'
      else if (selected && indexOfAll === -1 && $scope.model[key].length === $scope.to.options.length - 1) {
        // select 'ALL' checkbox
              $scope.model[key].push(all);
            }  
          };
        }
        .....

plunker: https://plnkr.co/edit/LWRZSS6HuBmrzSG5fsH9

angular-formly multiCheckbox Select All

3 Answers