Well basically this is a post meant for myself. I keep forgetting how to get this done. Basically this is a simple implementation of a Timer in Javascript.
Well, there might be situations that you need to limit the number of characters that you are allowing the user to enter in a numerical text field. Therefore, here's a fix for angularJS.
Well, in order to reduce the amount of work, you might be using quite a bit of 'ng-repeat' in your views/html files that uses angularJS. However, there might be a need to style the individual items differently. Therefore...
In case you are given an Angular JS based project and you are supposed to do some debugging work, here's a way to get you started with some simple message logging.
We saw this interesting bug with AngularJS and inline style with IE browsers. And we finally managed to find a workaround for this problem. And the solution requires ng-style and a separate function. :D
If you are going to use a <select> element in your website that is going to build on top of AngularJS, and at the same time if you ended up using a mixture of normal <option> element and <select> element with ng-repeat, rather than using ng-show to hide some of the elements, it might be better to use a filter function.
At my current workplace, they were using this javascript class to handle the time for different time zones, therefore I have created a simple example to showcase this class. :D
Main HTML file - index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Moment Timezone</title>
</head>
<!-- stitch this with the module declare in Javascript -->
<body ng-app="myApp">
<div ng-controller="SelectCtrl">The time in
<select ng-model="selectedItem" ng-options="item.label for item in myData | orderBy:'label'" ng-change="updateTime()"></select> is {{formattedTime}}.
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="js/moment-timezone.min.js"></script>
<script type="text/javascript" src="js/moment-timezone-data.js"></script>
</body>
</html>
//The data of the time zone of the various time zone.
tzData = {
"zones": {
"Asia/Singapore": [
"6:55:25 - LMT 1901_0_1 6:55:25",
"6:55:25 - SMT 1905_5_1 6:55:25",
"7 - MALT 1933_0_1 7",
"7:20 - MALST 1936_0_1 7:20",
"7:20 - MALT 1941_8_1 7:20",
"7:30 - MALT 1942_1_16 7:30",
"9 - JST 1945_8_12 9",
"7:30 - MALT 1965_7_9 7:30",
"7:30 - SGT 1982_0_1 7:30",
"8 - SGT"
],
"Australia/Sydney": [
"10:4:52 - LMT 1895_1 10:4:52",
"10 Aus EST 1971 10",
"10 AN EST"
],
"EST5EDT": [
"-5 US E%sT"
],
"Europe/Amsterdam": [
"0:19:32 - LMT 1835 0:19:32",
"0:19:32 Neth %s 1937_6_1 1:19:32",
"0:20 Neth NE%sT 1940_4_16_0 0:20",
"1 C-Eur CE%sT 1945_3_2_2 1",
"1 Neth CE%sT 1977 1",
"1 EU CE%sT"
],
"Europe/London": [
"-0:1:15 - LMT 1847_11_1_0 -0:1:15",
"0 GB-Eire %s 1968_9_27 1",
"1 - BST 1971_9_31_2",
"0 GB-Eire %s 1996",
"0 EU GMT/BST"
]
},
"rules": {
"Aus": [
"1917 1917 0 1 7 0:1 0 1",
"1917 1917 2 25 7 2 0 0",
"1942 1942 0 1 7 2 0 1",
"1942 1942 2 29 7 2 0 0",
"1942 1942 8 27 7 2 0 1",
"1943 1944 2 0 8 2 0 0",
"1943 1943 9 3 7 2 0 1"
],
"AN": [
"1971 1985 9 0 8 2 2 1",
"1972 1972 1 27 7 2 2 0",
"1973 1981 2 1 0 2 2 0",
"1982 1982 3 1 0 2 2 0",
"1983 1985 2 1 0 2 2 0",
"1986 1989 2 15 0 2 2 0",
"1986 1986 9 19 7 2 2 1",
"1987 1999 9 0 8 2 2 1",
"1990 1995 2 1 0 2 2 0",
"1996 2005 2 0 8 2 2 0",
"2000 2000 7 0 8 2 2 1",
"2001 2007 9 0 8 2 2 1",
"2006 2006 3 1 0 2 2 0",
"2007 2007 2 0 8 2 2 0",
"2008 9999 3 1 0 2 2 0",
"2008 9999 9 1 0 2 2 1"
],
"US": [
"1918 1919 2 0 8 2 0 1 D",
"1918 1919 9 0 8 2 0 0 S",
"1942 1942 1 9 7 2 0 1 W",
"1945 1945 7 14 7 23 1 1 P",
"1945 1945 8 30 7 2 0 0 S",
"1967 2006 9 0 8 2 0 0 S",
"1967 1973 3 0 8 2 0 1 D",
"1974 1974 0 6 7 2 0 1 D",
"1975 1975 1 23 7 2 0 1 D",
"1976 1986 3 0 8 2 0 1 D",
"1987 2006 3 1 0 2 0 1 D",
"2007 9999 2 8 0 2 0 1 D",
"2007 9999 10 1 0 2 0 0 S"
],
"Neth": [
"1916 1916 4 1 7 0 0 1 NST",
"1916 1916 9 1 7 0 0 0 AMT",
"1917 1917 3 16 7 2 2 1 NST",
"1917 1917 8 17 7 2 2 0 AMT",
"1918 1921 3 1 1 2 2 1 NST",
"1918 1921 8 1 8 2 2 0 AMT",
"1922 1922 2 0 8 2 2 1 NST",
"1922 1936 9 2 0 2 2 0 AMT",
"1923 1923 5 1 5 2 2 1 NST",
"1924 1924 2 0 8 2 2 1 NST",
"1925 1925 5 1 5 2 2 1 NST",
"1926 1931 4 15 7 2 2 1 NST",
"1932 1932 4 22 7 2 2 1 NST",
"1933 1936 4 15 7 2 2 1 NST",
"1937 1937 4 22 7 2 2 1 NST",
"1937 1937 6 1 7 0 0 1 S",
"1937 1939 9 2 0 2 2 0",
"1938 1939 4 15 7 2 2 1 S",
"1945 1945 3 2 7 2 2 1 S",
"1945 1945 8 16 7 2 2 0"
],
"C-Eur": [
"1916 1916 3 30 7 23 0 1 S",
"1916 1916 9 1 7 1 0 0",
"1917 1918 3 15 1 2 2 1 S",
"1917 1918 8 15 1 2 2 0",
"1940 1940 3 1 7 2 2 1 S",
"1942 1942 10 2 7 2 2 0",
"1943 1943 2 29 7 2 2 1 S",
"1943 1943 9 4 7 2 2 0",
"1944 1945 3 1 1 2 2 1 S",
"1944 1944 9 2 7 2 2 0",
"1945 1945 8 16 7 2 2 0",
"1977 1980 3 1 0 2 2 1 S",
"1977 1977 8 0 8 2 2 0",
"1978 1978 9 1 7 2 2 0",
"1979 1995 8 0 8 2 2 0",
"1981 9999 2 0 8 2 2 1 S",
"1996 9999 9 0 8 2 2 0"
],
"EU": [
"1977 1980 3 1 0 1 1 1 S",
"1977 1977 8 0 8 1 1 0",
"1978 1978 9 1 7 1 1 0",
"1979 1995 8 0 8 1 1 0",
"1981 9999 2 0 8 1 1 1 S",
"1996 9999 9 0 8 1 1 0"
],
"GB-Eire": [
"1916 1916 4 21 7 2 2 1 BST",
"1916 1916 9 1 7 2 2 0 GMT",
"1917 1917 3 8 7 2 2 1 BST",
"1917 1917 8 17 7 2 2 0 GMT",
"1918 1918 2 24 7 2 2 1 BST",
"1918 1918 8 30 7 2 2 0 GMT",
"1919 1919 2 30 7 2 2 1 BST",
"1919 1919 8 29 7 2 2 0 GMT",
"1920 1920 2 28 7 2 2 1 BST",
"1920 1920 9 25 7 2 2 0 GMT",
"1921 1921 3 3 7 2 2 1 BST",
"1921 1921 9 3 7 2 2 0 GMT",
"1922 1922 2 26 7 2 2 1 BST",
"1922 1922 9 8 7 2 2 0 GMT",
"1923 1923 3 16 0 2 2 1 BST",
"1923 1924 8 16 0 2 2 0 GMT",
"1924 1924 3 9 0 2 2 1 BST",
"1925 1926 3 16 0 2 2 1 BST",
"1925 1938 9 2 0 2 2 0 GMT",
"1927 1927 3 9 0 2 2 1 BST",
"1928 1929 3 16 0 2 2 1 BST",
"1930 1930 3 9 0 2 2 1 BST",
"1931 1932 3 16 0 2 2 1 BST",
"1933 1933 3 9 0 2 2 1 BST",
"1934 1934 3 16 0 2 2 1 BST",
"1935 1935 3 9 0 2 2 1 BST",
"1936 1937 3 16 0 2 2 1 BST",
"1938 1938 3 9 0 2 2 1 BST",
"1939 1939 3 16 0 2 2 1 BST",
"1939 1939 10 16 0 2 2 0 GMT",
"1940 1940 1 23 0 2 2 1 BST",
"1941 1941 4 2 0 1 2 2 BDST",
"1941 1943 7 9 0 1 2 1 BST",
"1942 1944 3 2 0 1 2 2 BDST",
"1944 1944 8 16 0 1 2 1 BST",
"1945 1945 3 2 1 1 2 2 BDST",
"1945 1945 6 9 0 1 2 1 BST",
"1945 1946 9 2 0 2 2 0 GMT",
"1946 1946 3 9 0 2 2 1 BST",
"1947 1947 2 16 7 2 2 1 BST",
"1947 1947 3 13 7 1 2 2 BDST",
"1947 1947 7 10 7 1 2 1 BST",
"1947 1947 10 2 7 2 2 0 GMT",
"1948 1948 2 14 7 2 2 1 BST",
"1948 1948 9 31 7 2 2 0 GMT",
"1949 1949 3 3 7 2 2 1 BST",
"1949 1949 9 30 7 2 2 0 GMT",
"1950 1952 3 14 0 2 2 1 BST",
"1950 1952 9 21 0 2 2 0 GMT",
"1953 1953 3 16 0 2 2 1 BST",
"1953 1960 9 2 0 2 2 0 GMT",
"1954 1954 3 9 0 2 2 1 BST",
"1955 1956 3 16 0 2 2 1 BST",
"1957 1957 3 9 0 2 2 1 BST",
"1958 1959 3 16 0 2 2 1 BST",
"1960 1960 3 9 0 2 2 1 BST",
"1961 1963 2 0 8 2 2 1 BST",
"1961 1968 9 23 0 2 2 0 GMT",
"1964 1967 2 19 0 2 2 1 BST",
"1968 1968 1 18 7 2 2 1 BST",
"1972 1980 2 16 0 2 2 1 BST",
"1972 1980 9 23 0 2 2 0 GMT",
"1981 1995 2 0 8 1 1 1 BST",
"1981 1989 9 23 0 1 1 0 GMT",
"1990 1995 9 22 0 1 1 0 GMT"
]
},
"links": {}
};
moment.tz.add(tzData);
// declare a module
var myApp = this.angular.module('myApp', ['myAppControllers']);
Javascript file that stores our Angularjs Controllers - controller.js
// declare a controller
angular.module('myAppControllers', []).
controller('SelectCtrl', function ($scope) {
//the selections for the time zone drop down
$scope.myData = [{
label: "Singapore",
value: "Asia/Singapore"
}, {
label: "Sydney",
value: "Australia/Sydney"
}, {
label: "EST5EDT",
value: "EST5EDT"
}, {
label: "Amsterdam",
value: "Europe/Amsterdam"
}, {
label: "London",
value: "Europe/London"
}];
//Preselect the first item in the array
$scope.selectedItem = $scope.myData[0];
$scope.formattedTime = "";
$scope.timer;
//This function will pick up the selected item from the
//drop down and display the corresponding time of the
//time zone
$scope.updateTime = function () {
var tempDate;
var strTz = $scope.selectedItem.value;
tempDate = moment.tz(strTz);
$scope.formattedTime = tempDate.format('MMMM Do YYYY, h:mm:ss a');
$scope.$apply();
}
$scope.updateTime();
//We will run the function updateTime every second
setInterval(function () {
$scope.updateTime()
}, 1000);
});
* Click here for the demo shown in this post.If you are going to use a <select> element in your website that is going to build on top of AngularJS, rather than using a mixture of <select> and <option> element, it would be best if you use a combination of <select> and the attribute 'ng-options'. As for the reason why, you can take a look at the demo below, and take a look at it again across browsers like 'Internet Explorer 8/9', 'Mozilla Firefox', etc...
When you have a table with fixed contents, it is pretty easy for you to apply styling that applies different set of styles on alternate table rows. However, things get more and more tricky when you are hiding and showing some of the rows. Therefore, here's a simple example that I have created using 'AngularJS' that helps you to overcome the problem of alternate background styles + hidden rows.