Checkbox Ng

Provides an Angular wrapper for Checkbox.

Checkbox Ng

Example

<div ng-app="TestApp" ng-strict-di ng-controller="MainCtrl">
  <div>Checked: {{checked}}</div>
  <div>Disabled: {{disabled}}</div>
  <div>
    <rg-button id="checkButton" ng-click="checked = !checked">{{checked ? 'Uncheck' : 'Check'}} checkbox programmatically</rg-button>
    <rg-button id="disableButton" ng-click="disabled = !disabled">{{disabled ? 'Enable' : 'Disable'}} checkbox</rg-button>
  </div>
  <p style="width: 300px;">
    <rg-checkbox ng-disabled="disabled === true" ng-model="checked">Checkbox</rg-checkbox>
  </p>
  <p style="width: 300px;">
    <rg-checkbox ng-disabled="disabled === true" ng-model="checked" ng-change="onNgChange()">Inverted checkbox</rg-checkbox>
    <div>{{ changeText }}</div>
  </p>
</div>

import angular from 'angular';
import CheckboxNG from '@jetbrains/ring-ui/components/checkbox-ng/checkbox-ng';
import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
angular.module('TestApp', [ButtonNG, CheckboxNG])
 .controller('MainCtrl', function($scope) {
   $scope.checked = false;
   $scope.disabled = false;

   $scope.changeText = 'text will be changed on ng-change of inverted checkbox';

   $scope.onNgChange = function(newValue) {
     $scope.changeText = 'ngChange appear for the inverted checkbox at ' + new Date();
   }
 });

Checkbox Ng with custom true/false values

Example

<div ng-app="TestApp" ng-strict-di>
  <div>Checked: {{checked}}</div>
  <p style="width: 300px;">
    <rg-checkbox ng-model="checked" ng-true-value="'The TRUE value'" ng-false-value="'The FALSE value'">Checkbox</rg-checkbox>
  </p>
</div>

import angular from 'angular';
import CheckboxNG from '@jetbrains/ring-ui/components/checkbox-ng/checkbox-ng';
angular.module('TestApp', [CheckboxNG]);

Checkbox Ng (disabled)

Example

<div ng-app="TestApp" ng-strict-di>
  <p style="width: 300px;">
    <rg-checkbox ng-disabled="true">Checkbox</rg-checkbox>
  </p>
</div>

import angular from 'angular';
import CheckboxNG from '@jetbrains/ring-ui/components/checkbox-ng/checkbox-ng';
angular.module('TestApp', [CheckboxNG]);