Wijmo 5 (Angular) - MultiSelect showSelectAllCheckbox

by Joel Parks

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">

  <h1>
    Initializing the MultiSelect control</h1>
  <p>
    We are settting the <b>checkedItems</b> property to: {{ logLevels }}</p>

  <wj-multi-select
    placeholder="Select Levels"
    items-source="logLevelList"
    header-format="{count} levels selected"
    initialized="initControl(s,e)"
    show-select-all-checkbox="true">
  </wj-multi-select>
  
  <p>
    And here are the currently checked items:</p>
  {{ checkedItems }}
</div>

CSS

.wj-dropdown {
  margin-bottom: 24pt;
}

JavaScript

var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function($scope) {

  $scope.logLevelList = ['Fatal', 'Error', 'Warn', 'Info', 'Debug'];
  $scope.logLevels = ['Fatal', 'Error'];
  
  $scope.initControl = function(s, e) {

		// monitor changes
    s.checkedItemsChanged.addHandler(function() {
      $scope.checkedItems = s.checkedItems;
			$scope.$apply();
		});

  	// initialize checked items
    s.checkedItems = $scope.logLevels;
	}
});