LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


CheckBox / Overview

{{ctrlText}}



Event log:

  • {{ev.name}}{{ev.info}}{{ev.value}}

This sample presents most of events that are fired from CheckBox directive. Depending on action, a specific event is fired, which you can handle by simple creating an event handler. From control panel on right side, you can change whether CheckBox can have two or three state values, and whether it is enabled dor disabled.

Here is list of events that are supported:

  • checkedChanging - Occurs before checked property value is changed
  • checkedChanged - Occurs after checked property value is changed
  • checkstateChanging - Occurs before checkState property value is changed
  • checkstateChanged - Occurs after checkState property value is changed
  • enabledChanged - Occurs when control is enabled or disabled
  • styleChanged - Occurs when control style has changed

Depending on some conditions, when handling some of above events you can prevent the default action to proceed, by canceling the operation.

In this sample event log will not register style changes events, because changes to the CheckBox appearance are not demonstrated here.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.checkbox.css" />

<link rel="stylesheet" href="css/themes/theme-flat-blue.css" />

<script type="text/javascript" src="external/angular.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.checkbox.min.js"></script>

</head>

<body>

<div ng-app="appModule" ng-controller="appCtrl">

<iui-checkbox name="{{ctrlName}}" events="ctrlEvents" auto-check="true" three-state="isThreeState" enabled="ctrlEnabled">"{{ctrlText}}"</iui-checkbox>

<div>

<label><input type="checkbox" ng-model="isThreeState" /> Three State</label><br />

<label><input type="checkbox" ng-model="ctrlEnabled" /> Enabled</label><br />

</div>

</div>

</body>

</html>

angular

.module("appModule", ["integralui"])

.controller("appCtrl", function($scope){

$scope.ctrlName = "ctrlSample";

$scope.ctrlEnabled = true;

$scope.ctrlText = "CheckBox";

$scope.isThreeState = true;

 

$scope.eventLog = [];

 

$scope.onCheckedChanging = function(e){

$scope.eventLog.unshift({ name: "checkedChanging", info: " event was fired before CheckBox value is changed, checked property value is: ", value: e.checked });

}

 

$scope.onCheckedChanged = function(e){

$scope.eventLog.unshift({ name: "checkedChanged", info: " event was fired after CheckBox value is changed, checked property value set to: ", value: e.checked });

}

 

$scope.onCheckStateChanging = function(e){

$scope.eventLog.unshift({ name: "checkstateChanging", info: " event was fired before CheckBox state is changed, checkState property value is: ", value: e.checkState });

}

 

$scope.onCheckStateChanged = function(e){

$scope.eventLog.unshift({ name: "checkstateChanged", info: " event was fired after CheckBox state is changed, checkState property value set to: ", value: e.checkState });

}

 

$scope.onEnabledChanged = function(e){

$scope.eventLog.unshift({ name: "enabledChanged", info: " event was fired when CheckBox becomes enabled or disabled, enabled property value set to: ", value: e.enabled });

}

 

$scope.ctrlEvents = {

checkedChanging: function(e){

return $scope.onCheckedChanging(e);

},

checkedChanged: function(e){

return $scope.onCheckedChanged(e);

},

checkstateChanging: function(e){

return $scope.onCheckStateChanging(e);

},

checkstateChanged: function(e){

return $scope.onCheckStateChanged(e);

},

enabledChanged: function(e){

return $scope.onEnabledChanged(e);

}

}

 

$scope.clearEventLog = function(){

$scope.eventLog.length = 0;

}

});

.event-panel

{

width: 600px;

}

.event-block

{

width: 600px;

height: 200px;

}

.event-log

{

height: 168px;

}