LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


CheckBox / Overview

{{ctrlText}}








IntegralUI CheckBox is a native AngularJS directive which acts as a check box component. Using options in right panel, you can check out some of the built-in properties of the CheckBox directive:

  • autoCheck - when true, the state of CheckBox is changed also by clicks on its title
  • enabled - determines whether the CheckBox is enabled or disabled
  • rtl - changes the CheckBox layout to left-to-right or right-to-left
  • threeState - determines whether CheckBox can have two or three state values
  • text - title of the CheckBox

<!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}}" auto-check="ctrlAutoCheck" enabled="ctrlEnabled" three-state="isThreeState" rtl="isRtl">"{{ctrlText}}"</iui-checkbox>

<div>

<label>CheckBox Properties: </label><br /><br />

<label><input type="checkbox" ng-model="ctrlAutoCheck" /> Auto Check</label><br />

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

<label><input type="checkbox" ng-model="isRtl" /> RTL</label><br />

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

<label>Text: <input type="text" ng-model="ctrlText"/></label><br />

</div>

</div>

</body>

</html>

angular

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

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

$scope.ctrlName = "ctrlSample";

$scope.ctrlAutoCheck = true;

$scope.ctrlEnabled = true;

$scope.isRtl = false;

$scope.isThreeState = true;

$scope.ctrlText = "CheckBox";

});