From 85caa73a92416f2d369a687ae646bdcd83c79ba2 Mon Sep 17 00:00:00 2001 From: dandoyon Date: Mon, 9 Jul 2012 21:47:00 -0700 Subject: [PATCH] Add uiCurrency doc --- css/app.css | 14 +++++++++++ index.html | 69 +++++++++++++++++++++++++++++++++++++++++++++++++---- js/app.js | 14 +++++++++-- 3 files changed, 90 insertions(+), 7 deletions(-) diff --git a/css/app.css b/css/app.css index 9c9f1c5..f627f2c 100644 --- a/css/app.css +++ b/css/app.css @@ -98,4 +98,18 @@ section { #directives-keypress textarea { width: 100%; height: 100px; +} + +span[ui-currency] { + display:block; +} +/*** Currency ***/ +.ui-currency-pos { + font-weight: bold; +} +.ui-currency-neg { + font-size: 125%; +} +.ui-currency-zero { + color: #000; } \ No newline at end of file diff --git a/index.html b/index.html index 9332279..618059c 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - + @@ -20,7 +20,7 @@ - + @@ -54,6 +54,7 @@
  • Select2
  • Show / Hide / Toggle
  • TinyMCE
    • +
  • Currency
  • @@ -104,6 +105,7 @@

    Global Defaults

    +

    jQuery Passthrough

    @@ -337,7 +339,7 @@

    Modal

    What?

    Takes the twitter bootstrap modal and lets you assign an ng-model to it. You can open/close the modal any way you want: data-* attributes, or use elm.modal('show'), or whatever. The ng-model you give will always correspond to whether the modal is opened or not, and if you set it it will also change the modal.

    -

    + +
    +
    +

    Currency

    +
    +
    +
    +

    What?

    +

    Angular currencyFilter wrapper

    +
    + + + +
    +
    +
    +

    Why?

    +

    In angular, you are able to specify what the currency symbol is (however, you might not want to change it for localization). + This directive gives greater control over your currency elements by allowing you to set CSS styles based on the number's sign. +

    +
    +
    +
    +
    +

    How?

    +

    This example shows how you can use ui.config for greater convenience. You can still pass the configuration as the expression (even in addition to ui.config).

    +
    +<span ui-currency ng-model="nums.pos"></span>
+<span ui-currency="{ symbol: '$', zero: 'my-zero-class'}" ng-model="nums.zero"></span>
+<span ui-currency ng-model="nums.neg"></span>
+
+<script>
+myModule.value('ui.config', {
+   currency: {
+      symbol: 'USD$',
+   }
+});
+</script>
+<style>
+span[ui-currency] {
+  display:block;
+}
+.ui-currency-pos {
+  font-weight: bold;
+}
+.ui-currency-neg {
+  font-size: 125%;
+}
+.my-zero-class {
+  color: #000;
+}
+</style>
+
    +
    +
    + +
    diff --git a/js/app.js b/js/app.js index 51ae428..daab74f 100644 --- a/js/app.js +++ b/js/app.js @@ -3,8 +3,11 @@ * demoApp - 1.0.0rc2 */ -var demoApp = angular.module('demoApp', ['ui'], function($routeProvider) { -}); +var demoApp = angular.module('demoApp', ['ui'], function($routeProvider) {}).value('ui.config', { + currency: { + symbol: 'USD$' + } + }); demoApp.config(function($locationProvider) { $locationProvider.hashPrefix(''); @@ -66,4 +69,11 @@ function UniqueCtrl($scope) { ]; } +function CurrencyCtrl($scope) { + $scope.nums = { + pos : 1000, + neg : -12345, + zero: 0 + }; +}; /* EOF */ \ No newline at end of file