angular-formly multiCheckbox全选

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

Answer 1

I wrote a working example here https://jsbin.com/dukewac/6/edit?js,output

The signature of templateOptions.onClick when a function is $modelValue, fieldOptions, scope, event . This occurs when the ngModelAttrsTemplateManipulator is run. I leveraged these variables in my function.

Some of it is a bit hacky but that partially has to do with how angular implements checkboxes and the workarounds that the multiCheckbox type in angular-formly-templates-bootstrap employs.

Gotchas

Nested Keys

This example will not work with nested keys but should if the multiCheckbox type was updated. This is because it is directly accessing the model using array access notation [see the code here] ( https://github.com/formly-js/angular-formly-templates-bootstrap/blob/a69d69e5c3f6382ea6a6c028c1d8bf76a9b94db3/src/types/multiCheckbox.js ).

Hardcoded "all" option

The code also assumes that the 'ALL' option is the first in the list and that its value is 'ALL'. This could be fixed by adding a templateOption property that references what the index and value the all functionality is for.

Model contains 'ALL'

'ALL' will appear in your model. A possible way to get around this would be to define a $parser for it.

No support for templateOptions.valueProp

templateOptions.valueProp is not taken into account but shouldn;t be too difficult to add.

Answer 2

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.

Answer 3

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