I'm able to get seconds in Time using AngularJS and its "Interval" option but i was thing about adding milliseconds to the same with 2 digits. Below is the code. can anyone tell me on how to add milliseconds to it.
AngularJs Code
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
HTML
<div class="col-lg-2" ng-app="myApp" ng-controller="myCtrl">
<h3 style="color: blue;font-family: cursive;"><b>{{theTime}}</b></h3>
</div>
Update - On how i found the solution.
I just did the following changes. Thanks to Pranjal
AngularJS Code
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date();
$interval(function () {
$scope.theTime = new Date();
}, 1);
});
HTML
<div class="col-lg-2" ng-app="myApp" ng-controller="myCtrl">
<h3 style="color: blue;font-family: cursive;font-size: 20;margin-left: 20;"><b>{{theTime | date:'HH:mm:ss:sss a'}}</b></h3>
</div>
<body>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.CurrentDate = new Date();
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<span>{{CurrentDate | date:'HH:mm:ss:sss'}}</span>
</div>
</body>
Related
Dates are coming from API for me. I need to display the date in a md-datepicker field. I'm getting date but it is not displaying in a datepicker.
Date is not fetching in a datepicker. Can anyone please tell how to display in a datepicker field.
var app = angular
.module('app', ['ngMaterial', 'md-steppers']);
app.controller('mainCtrl', ["$scope", "$rootScope", function($scope, $rootScope) {
$scope.dateBirth = new Date(2014, 3, 19);
var a = new Date($scope.dateBirth)
var day = a.getDate();
var month = a.getMonth() + 1;
var year = a.getFullYear();
$scope.anniversaryd = month + "/"+day+"/"+year;
alert($scope.anniversaryd);
}]);
h1 {
text-align: center;
}
<div ng-app="app" ng-controller="mainCtrl as vm">
<h2>
Selected Date: {{(anniversaryd | date) || 'null'}}
</h2>
</h2>
<md-datepicker
ng-model="anniversaryd"
md-date-filter="vm.isAvailable"
></md-datepicker>
</div>
You need to pass Date instance instead of string to md-datepicker.
var app = angular.module('app', ['ngMaterial']);
app.controller('mainCtrl', ["$scope", "$rootScope", function($scope, $rootScope) {
$scope.dateBirth = new Date(2014, 3, 19);
$scope.anniversaryd = $scope.dateBirth;
console.log($scope.dateBirth);
}]);
h1 {text-align: center;}
<link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<div ng-app="app" ng-controller="mainCtrl as vm">
<h2>
Selected Date: {{(anniversaryd | date) || null}}
</h2>
</h2>
<md-datepicker
ng-model="anniversaryd"
md-date-filter="vm.isAvailable"
></md-datepicker>
</div>
I'm new to AngularJS. I was trying to find the center point on the page with JavaScript then bind it to the $scope object. I'm not entirely sure if I bound the JavaScript variables correctly. After I did that, I was trying to preview the values in my HTML page. When I ran the code it threw an error message.
<script type="text/javascript">
var Page_Center_Width = $(window).width() / 2;
var Page_Center_Height = $(window).height() / 2;
</script>
<script>
var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope, $interval, $window) {
$scope.Window_Width = $window.Page_Center_Width;
$scope.Window_Height = $window.Page_Center_Height;
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl" >
<div >Window-Width: {{Window_Width}}</div>
<div >Window-Height: {{Window_Height}}</div>
</div>
var Page_Center_Width = $(window).width() / 2;
var Page_Center_Height = $(window).height() / 2;
var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope, $interval, $window) {
$scope.Window_Width = $window.Page_Center_Width;
$scope.Window_Height = $window.Page_Center_Height;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl">
<div>Window-Width: {{Window_Width}}</div>
<div>Window-Height: {{Window_Height}}</div>
</div>
You have different problem at your snippet. You put script tag on javascript section.
var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope, $interval, $window) {
$scope.Window_Width = $window.Page_Center_Width;
$scope.Window_Height = $window.Page_Center_Height;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl">
<div>Window-Width: {{Window_Width}}</div>
<div>Window-Height: {{Window_Height}}</div>
</div>
<script type="text/javascript">
var Page_Center_Width = 3434;
var Page_Center_Height = 1222;
</script>
I just started to learn Angular, and I tried to make concat var name so I can control it dynamically.
This is what I tried -
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunc(1)">Click Me!</button>
<div ng-show="showMe1">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
<div>Pesce</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showMe1 = false;
$scope.myFunc = function(x) {
var nametocng = 'showMe'+x;
//var nametocng = $parse("showMe"+x); // - I tried this also
$scope.nametocng = !$scope.nametocng;
}
});
</script>
use $scope[variable] for dynamic.
From your comment: In the end, I want to make multiple Toggles, but I want one function for all of them. and then, every button will handle one toggle
You can use ng-repeat for button to handle different menu's
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-repeat="button in array" ng-click="myFunc(button)">Click Me!</button>
<div ng-show="showMe1">
<h1>Menu:</h1>
<div>Pizza1</div>
<div>Pasta1</div>
<div>Pesce1</div>
</div>
<div ng-show="showMe2">
<h1>Menu:</h1>
<div>Pizza2</div>
<div>Pasta2</div>
<div>Pesce2</div>
</div>
{{nametocng}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.array = [1,2];
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.myFunc = function(x) {
angular.forEach($scope.array, function(value, key){
$scope['showMe'+value] = false
});
var nametocng = 'showMe'+x;
//var nametocng = $parse("showMe"+x); // - I tried this also
$scope[nametocng] = !$scope[nametocng];
}
});
</script>
</body>
</html>
Please run the above snippet
Here is a DEMO
If you have a dynamic variable name, you need to access via [] syntax. It will evaluate the variable's value and use that value as a property name.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunc(1)">Click Me!</button>
<div ng-show="showMe1">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
<div>Pesce</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showMe1 = false;
$scope.myFunc = function(x) {
var nametocng = 'showMe'+x;
//var nametocng = $parse("showMe"+x); // - I tried this also
$scope[nametocng] = !$scope[nametocng];
}
});
</script>
Try using this
you have keep condition on click and check against concat string
Js code
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.showMe1 = false;
$scope.nametocng = 'showMe1';
$scope.myFunc = function(x) {
var nametocng = 'showMe' + x;
$scope.showMe1 = $scope.nametocng === nametocng; // result will bool
}
});
HTML
<div ng-app='myApp'>
<div ng-controller='ctrl'>
<button ng-click="myFunc(1)">Click Me!</button>
{{showMe1}} {{nametocng}}
<div ng-show="showMe1">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
<div>Pesce</div>
</div>
</div>
</div>
Jsfiddle link
I am new to AngularJS JavaScript. Just started learning it. I was trying with some small sample programs. Here is what I tried but its throwing error.
<body ng-app="myApp">
<div ng-controller="myCtrl">
{{time}}
<br>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.service('hexafy', ['',
function() {
this.myfunc = function(num) {
return num.toString(16);
}
}
]);
app.controller('myCtrl', ['hexafy', '$scope', '$interval',
function(hexafy, $scope, $interval) {
$scope.time = new Date().toLocaleTimeString();
$interval(function() {
$scope.time = new Date().toLocaleTimeString();
}, 1000);
// $scope.hex = hexafy.myfunc(255);
}
]);
</script>
The array syntax is used when the code is minified and keep the mapping of arguments. For more on this please see my other answer Why we Inject our dependencies two times in angularjs?.
In the code, as there is no parameter passed to the hexafy service, there is no need of using the array syntax and pass empty string.
app.service('hexafy', ['',
function() {
Use normal syntax.
app.service('hexafy', function() { // <-- Remove `[` and empty string from here
...
...
}); // <-- Remove `]` from here
var app = angular.module("myApp", []);
app.service('hexafy', function() {
this.myfunc = function(num) {
return num.toString(16);
}
});
app.controller('myCtrl', ['hexafy', '$scope', '$interval',
function(hexafy, $scope, $interval) {
$scope.time = new Date().toLocaleTimeString();
$interval(function() {
$scope.time = new Date().toLocaleTimeString();
}, 1000);
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
{{ time }}
<br />
</div>
</body>
What Tushar has suggested is perfect, Just adding working piece of Plunker
app.service('hexafy',function() {
this.myfunc = function(num) {
return num.toString(16);
}
}
);
I am trying to create a form that users can press the '+' sign and add a new line. I do this by calling a function when a button is clicked and then pushing a new line into the array. The new lines are not being created, however. The function below that removes the line seems to be working.
Here is the js:
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', '$q', function($scope, $q) {
$scope.arr = [1,2];
$scope.addLine = function(index){
$scope.arr.push();
}
$scope.removeLine = function(index){
$scope.arr.splice(index, 1);
}
}]);
You need to push something into the array.
Push() Definition and Usage:
The push() method adds new items to the end of an array, and returns the new length.
Note: The new item(s) will be added at the end of the array.
Note: This method changes the length of the array.
Tip: To add items at the beginning of an array, use the unshift() method.
http://www.w3schools.com/jsref/jsref_push.asp
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope',
function($scope) {
$scope.arr = [1, 2];
$scope.addLine = function(index) {
$scope.arr.push(index);
}
$scope.removeLine = function(index) {
$scope.arr.splice(index, 1);
}
}
]);
<!doctype html>
<html ng-app="myApp">
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
<button name="addLine" ng-click="addLine(arr.length+1)">Add Line</button>
{{ arr | json}}
<ul>
<li data-ng-repeat="x in arr">
{{ x }} - <button name="addLine" ng-click="removeLine($index)">Remove Line</button>
</li>
</ul>
</div>
</body>
</html>
Look this:
var app = angular.module('App', []);
app.controller('AppController', ['$scope', function($scope) {
$scope.arr = [1,2];
$scope.addLine = function(last){
$scope.arr.push(last + 1);
}
$scope.removeLine = function(index){
$scope.arr.splice(index, 1);
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController">
<button ng-click="addLine(arr.length)">Add Line</button>
<hr/>
<div data-ng-repeat="x in arr">
Line: {{x}} <button ng-click="removeLine($index)">Del</button>
</div>
</div>