Skip to content

Commit 85caa73

Browse files
dandoyondandoyon
committed
Add uiCurrency doc
1 parent acbdf08 commit 85caa73

File tree

3 files changed

+90
-7
lines changed

3 files changed

+90
-7
lines changed

‎css/app.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,4 +98,18 @@ section {
9898
#directives-keypress textarea {
9999
width: 100%;
100100
height: 100px;
101+
}
102+
103+
span[ui-currency] {
104+
display:block;
105+
}
106+
/*** Currency ***/
107+
.ui-currency-pos {
108+
font-weight: bold;
109+
}
110+
.ui-currency-neg {
111+
font-size: 125%;
112+
}
113+
.ui-currency-zero {
114+
color: #000;
101115
}

‎index.html‎

Lines changed: 64 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script>
88
<script type="text/javascript" src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
99
<script type="text/javascript" src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
10-
<!-- <script type="text/javascript" src="/angular-ui/build/angular-ui.js"></script> -->
10+
<!-- <script type="text/javascript" src="/angular-ui/build/angular-ui.js"></script> -->
1111
<script type="text/javascript" src="js/prettify.js"></script>
1212
<script type="text/javascript" src="https://raw.github.com/petebacondarwin/angular-contrib/master/js/lib/jquery.maskedinput-1.3.js"></script>
1313
<script type="text/javascript" src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>
@@ -20,7 +20,7 @@
2020
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet">
2121
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
2222
<link rel="stylesheet" type="text/css" href="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.css" />
23-
<!-- <link rel="stylesheet" type="text/css" href="/angular-ui/build/angular-ui.css" /> -->
23+
<!-- <link rel="stylesheet" type="text/css" href="/angular-ui/build/angular-ui.css" /> -->
2424
<link rel="stylesheet" type="text/css" href="css/prettify.css" />
2525
<link rel="stylesheet" type="text/css" href="http://ivaynberg.github.com/select2/select2-master/select2.css" />
2626
<link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.css" />
@@ -54,6 +54,7 @@
5454
<li><a href="#directives-select2">Select2</a></li>
5555
<li><a href="#directives-showhide">Show / Hide / Toggle</a></li>
5656
<li><a href="#directives-tinymce">TinyMCE</a></li>
57+
<li><a href="#directives-currency">Currency</a></li>
5758
</ul>
5859
</li>
5960
<li class="dropdown">
@@ -104,6 +105,7 @@ <h1>Global Defaults</h1>
104105
</div>
105106
</section>
106107

108+
107109
<section id="directives-jq">
108110
<div class="page-header">
109111
<h1>jQuery Passthrough</h1>
@@ -337,7 +339,7 @@ <h1>Modal</h1>
337339
<h3>What?</h3>
338340
<p>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.
339341
<p>
340-
<div id="myModal" class="modal hide fade" ui-modal ng-model="modalShown">
342+
<div id="myModal" class="modal hide" ui-modal ng-model="modalShown">
341343
<div class="modal-header"><h1>Modalin'!</h1></div>
342344
<div class="modal-body">
343345
<p>Cool beans, dude.</p>
@@ -485,13 +487,12 @@ <h3>How?</h3>
485487
<div class="page-header">
486488
<h1>TinyMCE</h1>
487489
</div>
488-
<p class="alert alert-error"><i class="icon-info-sign"></i> Demo disabled temporarily due to conflicts with other directives. Use at your own risk!</p>
489490
<div class="row">
490491
<div class="span6">
491492
<h3>What?</h3>
492493
<p>TinyMCE WYSIWYG integration</p>
493494
<div class="well">
494-
<textarea ng-model="tinymce"></textarea>
495+
<textarea ui-tinymce="{theme:'simple'}" ng-model="tinymce"></textarea>
495496
<h4>Output:</h4>
496497
<p>{{tinymce}}</p>
497498
</div>
@@ -515,6 +516,64 @@ <h3>How?</h3>
515516
</div>
516517

517518

519+
</section>
520+
521+
<section id="directives-currency" ng-controller="CurrencyCtrl">
522+
<div class="page-header">
523+
<h1>Currency</h1>
524+
</div>
525+
<div class="row">
526+
<div class="span6">
527+
<h3>What?</h3>
528+
<p>Angular currencyFilter wrapper</p>
529+
<div class="well">
530+
<span ui-currency ng-model="nums.pos"></span>
531+
<span ui-currency="{ symbol: '$', zero: 'my-zero-class'}" ng-model="nums.zero"></span>
532+
<span ui-currency ng-model="nums.neg"></span>
533+
</div>
534+
</div>
535+
<div class="span6">
536+
<h3>Why?</h3>
537+
<p>In angular, you are able to specify what the currency symbol is (however, you might not want to change it for localization).
538+
This directive gives greater control over your currency elements by allowing you to set CSS styles based on the number's sign.
539+
</p>
540+
</div>
541+
</div>
542+
<div class="row">
543+
<div class="span12">
544+
<h3>How?</h3>
545+
<p>This example shows how you can use <code>ui.config</code> for greater convenience. You can still pass the configuration as the expression (even in addition to <code>ui.config</code>).</p>
546+
<pre class="prettyprint linenums" ng-non-bindable>
547+
&lt;span ui-currency ng-model=&quot;nums.pos&quot;&gt;&lt;/span&gt;
548+
&lt;span ui-currency=&quot;{ symbol: '$', zero: 'my-zero-class'}&quot; ng-model=&quot;nums.zero&quot;&gt;&lt;/span&gt;
549+
&lt;span ui-currency ng-model=&quot;nums.neg&quot;&gt;&lt;/span&gt;
550+
551+
&lt;script&gt;
552+
myModule.value(&#x27;ui.config&#x27;, {
553+
currency: {
554+
symbol: &#x27;USD$&#x27;,
555+
}
556+
});
557+
&lt;/script&gt;
558+
&lt;style&gt;
559+
span[ui-currency] {
560+
display:block;
561+
}
562+
.ui-currency-pos {
563+
font-weight: bold;
564+
}
565+
.ui-currency-neg {
566+
font-size: 125%;
567+
}
568+
.my-zero-class {
569+
color: #000;
570+
}
571+
&lt;/style&gt;
572+
</pre>
573+
</div>
574+
</div>
575+
576+
518577
</section>
519578

520579
<section id="filters-length" ng-controller="LengthCtrl">

‎js/app.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@
33
* demoApp - 1.0.0rc2
44
*/
55

6-
var demoApp = angular.module('demoApp', ['ui'], function($routeProvider) {
7-
});
6+
var demoApp = angular.module('demoApp', ['ui'], function($routeProvider) {}).value('ui.config', {
7+
currency: {
8+
symbol: 'USD$'
9+
}
10+
});
811

912
demoApp.config(function($locationProvider) {
1013
$locationProvider.hashPrefix('');
@@ -66,4 +69,11 @@ function UniqueCtrl($scope) {
6669
];
6770
}
6871

72+
function CurrencyCtrl($scope) {
73+
$scope.nums = {
74+
pos : 1000,
75+
neg : -12345,
76+
zero: 0
77+
};
78+
};
6979
/* EOF */

0 commit comments

Comments
 (0)