Angular Multicheck

Angular Multicheck is a module of AngularJs that allows to create a multi-check tree dynamically from an object.

Demo

Items checked true

{{numberItemsChecked}}

Parents checked true

{{parentsCheckedTrue}}

All checked true

{{allCheckedTrue}}

Angular Requeriments

Multicheck supports Angular 1.5.x

Has not been tested in previous versions

Supported browsers

  • Chrome
  • Firefox
  • IE9, IE10, IE11
  • Opera
  • Safari

Use

1. Download the "Multicheck" module

Download Multicheck Module

2. Include the module and style in the head of index.html

3. Include the dependence in your module app and configure the module to add baseUrl and the titles to show.

var App = angular.module('App', ['MultiCheck']) //MultiCheck configuration .config(["multiCheckProvider", function (config) { config.baseUrl = 'app/modules/'; //required config.titleSomeSelected = 'An option has been selected'; config.titleNothingSelected = 'Choose an option'; }]);

4. Make sure you have the object we will use.

For example:

App.controller('mainController', ['$scope', function ($scope) { $scope.multiCheckData = [{ id: 5, label: 'SOCIETY 1', checked: false, type: 1, departments: [{ id: 70, label: 'DEPARTMENT 1', checked: false, type: 2 }] }]; }]);

$scope.multiCheckData will be the object that we pass to the directive

5. Add the directive to the view

The "extra-data" attribute will use to validate the form, as used in this example