I am using the datepicker directive of angularjs from angular materials to create a calendar for input of date.
HTML
<md-datepicker ng-model='vm.endtoDate'></md-datepicker>
The problem i am facing is that when i click on any date on the calendar it does not gets updated.
JS
function SearchController($scope,$stateParams, $q, $log, httpRequests, $location, searchResults, header, icons,leafletData){
var coordinates_selected;
var vm = this;
vm.endtoDate = new Date();
var endto= console.log(JSON.stringify(vm.endtoDate,'end'));
P.S i do not want to use the watch function to monitor the changed values as i later want to store the values in another variable for temporal searching.
If u dont want a watcher or something else i suggest you to go for a change event with in date picker and by using that store the changed date and use it where ever you want
angular.module('datepickerBasicUsage', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
$scope.endtoDate = new Date();
$scope.selecteddate=function(){
var endto= $scope.endtoDate;
console.log(endto);
}
});
<!doctype html>
<html ng-app="datepickerBasicUsage">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css">
<script src="app.js"></script>
</head>
<body>
<div ng-controller="AppCtrl" >
<md-datepicker ng-model="endtoDate" ng-change="selecteddate()"></md-datepicker>
</div>
</body>
</html>
angular.module('datepickerBasicUsage', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
$scope.endtoDate = new Date();
$scope.selecteddate=function(){
var endto= $scope.endtoDate;
console.log(endto);
}
});
<!doctype html>
<html ng-app="datepickerBasicUsage">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css">
<script src="app.js"></script>
</head>
<body>
<div ng-controller="AppCtrl" >
<md-datepicker ng-model="endtoDate" ng-change="selecteddate()"></md-datepicker>
</div>
</body>
</html>
Related
I need to show only the placeholder text on md-datepicker before selecting a date. But when I send a null value to md-datepickeer it default show the current date.
This is my angularjs controller code line to pass null date
appCtrl.myDate = null;
This is my html code.
<md-datepicker-custom name="dateField"
ng-model="appCtrl.myDate"
md-placeholder="Enter time" >
</md-datepicker-custom>
It show current date. I need to get clear field and it should show placeholder text.
You need to remove formatDate function from config, then placeholder is working.
Here is the snippet:
var app = angular.module('plunker', ['ngMaterial']);
app.config(function($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = formatDate;
function formatDate(date) {
return date ? moment(date).format('L') : '';
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.8/angular-material.min.css">
</head>
<body>
<md-datepicker name="terminationDate" md-placeholder="Enter date" ng-model="vm.terminationDate">
</md-datepicker>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment-with-locales.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
</body>
</html>
<md-datepicker
name="terminationDate"
md-placeholder="Enter date"
ng-model="vm.terminationDate">
</md-datepicker>
Please refer this : http://plnkr.co/edit/O5ePYKyo1ILlheMz8KdO?p=preview
It may help you.
Here is the code in concern:
<div ng-app="">
https://www.facebook.com/sharer/sharer.php?u={{$location.absUrl()}}
https://www.facebook.com/sharer/sharer.php?u={{$location.$$url}}
https://www.facebook.com/sharer/sharer.php?u={{$location.$$path}}
</div>
We need the value of the u parameter to be current page.
Where are we wrong?
You cannot do that in HTML, alternatively you can get the current location like this,
Assign the curren location to a scope variable,
$scope.a = window.location.href;
Then in HTML,
<br>Link = <a ng-href="https://www.facebook.com/sharer/sharer.php?u={{a }}" target="_blank">facebook</a>
DEMO
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('TestCtrl', ['$scope', function($scope) {
$scope.a = window.location.href;
}]);
</script>
</head>
<body ng-app="myApp">
<div ng-controller="TestCtrl">
<input type="text" ng-model="a">
<br>a={{a}}
<br>
<br>Link = <a ng-href="https://www.facebook.com/sharer/sharer.php?u={{a}}" target="_blank">facebook</a>
</div>
</body>
</html>
The property which are present of $scope variable those are only available to use on HTML as binding. So $location service you have to expose on $scope
//inject $location to controller before use it.
$scope.$location = $location;
I'm starting learning Angular.js with this book "Angular.js OReilly", I am trying to construct the first examples that they have. I already downloaded Angular.js from the website and create my controller.js like it says, but I always get the error in the title.
This is what I did:
<html ng-app>
<head>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
function HelloController($scope) {
console.log("a");
$scope.greeting = { text: 'Hello' };
}
You need to put HelloController between tag inside tag.
<head>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
<script>
function HelloController($scope) {
console.log("a");
$scope.greeting = { text: 'Hello' };
}
</script>
</head>
Why are you using so old syntax? Try to start with new syntax you can do your above requirement like below code:
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);//creating app
myApp.controller('GreetingController', ['$scope', function($scope) { // creating controller
$scope.greeting = 'Hola!';
}]);
</script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
First you have to make app then make a controller. try this
I've a bootstrap alert that appears after some operation is completed,but I want it to close after two or more seconds,how can I achieve this effect?I'm using Angular.js and I've only found solutions in jQuery.
Thanks.
Angular bootstrap provides an option for alert directive dismiss-on-timeout. It accepts timeout in milliseconds. This attribute requires the presence of the close attribute.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function($scope) {
$scope.show = true;
$scope.closeAlert = function(index) {
$scope.show = false;
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AlertDemoCtrl">
<uib-alert type="danger" close="closeAlert()" ng-if="show" dismiss-on-timeout="4000">Oh snap! Change a few things up and try submitting again.</uib-alert>
</div>
</body>
</html>
I am absolutely new to angular JS and going through the tutorial of ng-book. I am trying to add a clock on the page but the page is showing Hello {{clock}} instead of actual clock. I am using Angular 1.4.8.
Here is my code.
clock.html
<!doctype html>
<html ng-app>
<head>
<title>Angular clock demo</title>
<script src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js" ></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello {{ clock }}</h1>
</div>
</body>
</html>
code for js/app.js
function MyController($scope) {
$scope.clock = new Date();
var updateClock = function(){
$scope.clock = new Date();
};
setInterval(function(){
$scope.$apply(updateClock);
},1000);
updateClock();
};
From angular 1.3.x global controller isn't allowed by default.
Bind your controller with module
Like this
var app=angular.module("app",[]);
app.controller("MyController",MyController);
html
ng-app="app"
DEMO