Advanced User Interface Controls and Components
Event log:
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:
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;
}