Autonumeric

The bb-autonumeric directive wraps up the autoNumeric jQuery plugin to format any type of number, including currency. You must use this directive in conjunction with the ngModel directive where the property bound to ngModel is the raw numeric value on your model.

Dependencies


Autonumeric settings

  • bb-autonumeric(Optional.) Assigns the name of a property from the bbAutonumericConfig object. (Default: number)
  • bb-autonumeric-settings — Specifies a value that represents a settings object to pass to the autoNumeric jQuery plugin. These options override any default options specified in the bb-autonumeric attribute. For more information, see the complete list of options.

Autonumeric filter settings

In addition to the directive, the autonumeric component includes a filter that can format numbers. The filter can optionally abbreviate numbers according to SKY UX patterns. For example, it can display 10,000 as 10k, 1,000,000 as 1m, and 1,000,000,000 as 1b. The filter takes three arguments:

  • input — Specifies the value to format.
  • configType — If a String, then it specifies the name of the configuration (number, money, or percent) to apply to the value. If an Object, then it represents a settings object to pass to the autoNumeric jQuery plugin. For more information, see the complete list of options.
  • abbreviate — Provides a Boolean value to indicate whether to abbreviate large numbers.

Demo


Raw value: {{autoCtrl.moneyValue}}
May also be bound to a read-only element:
 

Raw value: {{autoCtrl.numberValue}}
May also be bound to a read-only element:


Money value: {{autoCtrl.moneyValue | bbAutonumeric:'money'}}
Abbreviated money value: {{autoCtrl.moneyValue | bbAutonumeric:'money':true}}

Number value: {{autoCtrl.numberValue | bbAutonumeric}}
Abbreviated number value: {{autoCtrl.numberValue | bbAutonumeric:'number':true}}
No decimals value: {{autoCtrl.numberValue | bbAutonumeric:{ mDec: 0 } }}
Percent value: {{autoCtrl.numberValue | bbAutonumeric:'percent'}}

Markup

<div ng-controller="AutonumericInputTestController as autoCtrl">

  <div class="row">
    <div class="col-md-4">
        <form>
      <div class="tile-form">

        <div class="form-group">
          <label for="autonumeric-money-{{$id}}" class="control-label">
            <h4>Enter a money value:</h4>
          </label>
          <br />

          <input type="text" class="form-control" id="autonumeric-money-{{$id}}" ng-model="autoCtrl.moneyValue" bb-autonumeric="money" bb-autonumeric-settings="autoCtrl.customSettings" />

          <a href="#"></a>
        </div>

        <div class="clearfix"></div>
        <div>
          Raw value: <strong>{{autoCtrl.moneyValue}}</strong>
        </div>
        <div>
          May also be bound to a read-only element: <strong ng-model="autoCtrl.moneyValue" bb-autonumeric-settings="autoCtrl.customSettings" bb-autonumeric="money"></strong>
        </div>
        <div>&nbsp;</div>
        <div class="form-group">
          <label for="autonumeric-number-{{$id}}" class="control-label">
            <h4>Enter a number value:</h4>
          </label>
          <br />
          <input type="text" class="form-control" id="autonumeric-number-{{$id}}" ng-model="autoCtrl.numberValue" bb-autonumeric="number" />
          <a href="#"></a>
        </div>
        <div class="clearfix"></div>
        <div>
          Raw value: <strong>{{autoCtrl.numberValue}}</strong>
        </div>
        <div>
          May also be bound to a read-only element: <strong ng-model="autoCtrl.numberValue"  bb-autonumeric bb-autonumeric-money></strong>
        </div>
        <div class="clearfix"></div>
        <br />
        <div class="form-group">
          <label class="control-label">
            <h4>Filter example</h4>
          </label>
          <br />
          <div>
            Money value: <strong>{{autoCtrl.moneyValue | bbAutonumeric:'money'}}</strong>
          </div>
          <div>
            Abbreviated money value: <strong>{{autoCtrl.moneyValue | bbAutonumeric:'money':true}}</strong>
          </div>
          <br />
          <div>
            Number value: <strong>{{autoCtrl.numberValue | bbAutonumeric}}</strong>
          </div>
          <div>
            Abbreviated number value: <strong>{{autoCtrl.numberValue | bbAutonumeric:'number':true}}</strong>
          </div>
          <div>
            No decimals value: <strong>{{autoCtrl.numberValue | bbAutonumeric:{ mDec: 0 } }}</strong>
          </div>
          <div>
            Percent value: <strong>{{autoCtrl.numberValue | bbAutonumeric:'percent'}}</strong>
          </div>
        </div>
      </div>
    </form>
    </div>
  </div>
</div>

JavaScript

/*global angular, alert */
(function () {
    'use strict';

    function AutonumericInputTestController() {
        var self = this;

        self.moneyValue = 12345678;
        self.numberValue = 87654321;
        self.customSettings = {
            aSign: '$',
            vMin: 0
        };

        self.clickButton = function () {
            alert('model value is: ' + self.moneyValue);
        };

    }

    function AutonumericConfig(bbAutonumericConfig) {
        bbAutonumericConfig.money.aSep = ',';
    }

    AutonumericConfig.$inject = ['bbAutonumericConfig'];

    angular.module('stache')
    .config(AutonumericConfig)
    .controller('AutonumericInputTestController', AutonumericInputTestController);

}());