My problem is that I want to format numbers based on my language. For example, showing 123456.12345 in en-US as 123,456.12 or in fa-IR as ۱۲۳٬۴۵۶٫۱۲.
The best solution I can imagine is writing an angular filter but I think it is very slow because I need to show too many numbers in the view.
My question: Is there any better way to handle this problem or I have to use angular filters?
Solution 1 with filters:
You can include the relative locale script in index.html as stated here:
<html ng-app>
<head>
….
<script src="angular.js"></script>
<script src="i18n/angular-locale_de-de.js"></script>
….
</head>
</html>
Then using the built-in filter number you can format them easily
Solution 2 with toLocaleString:
If you don't want to use filter, you have to convert the numbers "manually" using toLocaleString for each number you have:
$scope.myNumber = 9999.99;
$scope.myNumber.toLocaleString('de-DE');
This is a JSFidlle showing you how a number is formatted for de-DE locale instead the en-US one used by default
Related
https://docs.angularjs.org/guide/expression
The simplest example using data bindings =
<span>
1+2={{1+2}}
</span>
works with
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.min.js"></script>
and the output is 1 + 2 = 3
but if I change to the current workable angular script
<script data-require="angular.js#*" data-semver="2.0.0-alpha.25" src="https://code.angularjs.org/2.0.0-alpha.25/angular.js"></script>
the output is 1+2={{1+2}}
So why does the current angular not allow this simple data binding example to work?
https://code.angularjs.org/2.0.0-alpha.25/angular.js return 404 page
So, please use another version of angular.
your script should be like this
<script data-require="angular.js#*" data-semver="2.0.0-alpha.25" src="https://code.angularjs.org/2.0.0-alpha.25/angular2.js"></script>
if you want to know about more working version of angular then visit this
list of Angular working Version
I am trying to translate a FullCalendar using the language file included in the package. To make it simpler with angular, I use the plugin ui-calendar.
To do so, I imported the language script as described in the doc :
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
... //other includes generated by bower
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/fullcalendar/dist/fullcalendar.js"></script>
<script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- FullCalendar language pack -->
<script src="bower_components/fullcalendar/dist/lang/fr-ca.js"></script>
However, the months and the days are not being translated. I did managed to translate the labels manually using the "monthNames", "dayNames", etc configs, but IMO that's ugly and it doesn't translate the ui.bootstrap.datepicker.
From what I understand, the problem is momentjs who wont take anything I give him. I tried to do a 'moment.lang('fr-ca')' but it doesn't do much. Anyone know a "Mickey Mouse trick" that could help to fix this issue?
Note: ui-calendar uses the v 1.6 of fullcalendar which doesn't include the languages utilities. So I added fullcalendar#2.1.0 to my bower.json. Everything seams to be working properly, I don't see where this could mess up the language since I'm calling fullcalendar directly.
Here is a working plunkr: http://plnkr.co/edit/AFpj79M1C6vOewSWLX8J
You also need to localise angular, you can read the doc here: https://docs.angularjs.org/guide/i18n
To make it work I added the code of i18n/angular-locale_fr-ca.js in the plunkr file ng-fr-ca.js.
Looking at the source of ui-calendar (line 179), you will see it uses anggular $locale service to translate days, month, etc. I have added a console.log to the source so you can see the difference between
var dtf = $locale.DATETIME_FORMATS;
console.log(dtf);
$locale uses engglish by default. If you load one of the i18n locale file, you will have it translated.
In your opinion, is it best to go overboard with BackboneJS and use templates as much as possible or adding elements like an Alphabet Filter should simply be done with JavaScript.
Clarification: Alphabet Filter to filter results [a], [b], [c] etc to get results starting with a, b, c etc
Plain JavaScript would be my answer on 1999.
On 2013, is there a functionality that do you like to implement on JavaScript without MVC(in this case Backbone.js)?
Alphabet filters with plain JavaSript equals to reinvent the wheel, with Backbone is just to filter a collection.
I do not have doubts man, use Backbone.js
This question was posted quite a long time ago, but there is now an open source vanilla JavaScript plugin available that will alphabetically filter any HTML list with alphabetical navigation
It's called AlphaListNav.js
Just output your HTML list:
<ul id="myList">
<li>Eggplant</li>
<li>Apples</li>
<li>Carrots</li>
<li>Blueberries</li>
</ul>
Add the CSS in the <head> of your page:
<link rel="stylesheet" href="alphaListNav.css">
Add the JavaScript file just before the closing </body> tag:
<script src="alphaListNav.js"></script>
And then Initialize the AlphaListNav library on your list by passing it the id of your list. Like so:
<script>
new AlphaListNav('myList');
</script>
It has all kinds of different options for customizing the behavior you may want:
For example:
<script>
new AlphaListNav('myList', {
initLetter: 'A',
includeAll: false,
includeNums: false,
removeDisabled: true,
//and many other options available..
});
</script>
The GitHub project is here
And a CodePen example is here
The AlphaListNav.js website & documentation is here
As the title says; I want the content of an external file (text,html,php etc.) onto a div.
There is basically text in an external file, called: text_1.txt or *text_1.html* , and I want that text displayed within a div that is located on a homepage.
The perfect solution would be a pretty basic code to display text from a text or html file
by inserting it onto a div classed: content
Here I have illustrated the issue with basic code, use this as an example to write a solution.
Code in text_1.html:
<p>Hello world.</p>
Code in index.html:
<!doctype html>
<html>
<head>
<title>Homepage</title>
</head>
<body>
<div class="content"></div>
</body>
</html>
This is as simple as I can put it.
I highly appreciate all the answers I receive, thank you.
PS here are some things you should avoid answering:
Use iframes, or any other frame type solution.
Make use of the onclick function within jquery etc.
Use ineffective textfields to replace certain text.
Make usage of an insertion code for virtual server or similar methods.
There's no way to do this unless and until you use Server Side Includes using PHP, ASP, or JSP
http://en.wikipedia.org/wiki/Server_Side_Includes
If you want to do it using php you can use this:
require_once('filename.php'); /* For including files */
Or use native functions to open .txt files in your pages
Why dont you just do it with jquery
$(document).ready(function() {
$('.content').load('text_1.html');
});
We are working on a website like www.justdial.com .
We want to provide AutoComplete feature.
This autocomplete feature should be inline with the performance of justdial's.
We are using Indexes, please suggest more ways to provide superfast autocompletion.
I do not have much experience in the subject, but I have just implemented JQuery autocomplete with a medium sized list ~(1,000) entries, partial matches is enabled and it is still astoundingly fast. The only trick I've used is creating seperate js files for the lists and calling them first from the html. I also refrain from using the jquery on ready, so the complete list is bieng uploaded immediately. The actual calls to autocomplete are done on page ready. JQuery AutoComplete
Unfortunately I can't add the actual code because the data is sensitive, but its on the lines of..
<html>
<body>
Some HTML
<script type = "text/javascript" src = "collection.js"></script>
<script type = "text/javascript" src = "jquery.min.js"></script>
<script type = "text/javascript" src = "autocomplete.js"></script>
</body>
</html>
Collection .js would look something like
var collection = ["1","2","3", ... "1000"];
and AutoComplete.js would look like
$(document).ready(function(){
$("#form").autocomplete(collection, { matchContains:true });
});
I don't know what built in optimization Jquery has,but it seems pretty fast to me.
I believe even the Google "Suggest" feature used javascript, so it would just be a matter of keeping the lists sorted and dividing them efficiently? Maybe Huffman Coding could help?