Hcetipe Hcetipe - 4 months ago 10
AngularJS Question

Trouble with date with AngularJs script in HTML

I come to you because in my web page I want to display the time which come from an Angular script. So I have in my HTML :

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<p class="alert alert-info">Time is: {{mytime | date:'shortTime'}}</p>


and my script :

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TimepickerDemoCtrl', function ($scope, $log) {
$scope.mytime = new Date();

$scope.hstep = 1;
$scope.mstep = 15;

$scope.options = {
hstep: [1, 2, 3],
mstep: [1, 5, 10, 15, 25, 30]
};

$scope.ismeridian = true;
$scope.toggleMode = function() {
$scope.ismeridian = ! $scope.ismeridian;
};

$scope.update = function() {
var d = new Date();
d.setHours( 14 );
d.setMinutes( 0 );
$scope.mytime = d;
};

$scope.changed = function () {
$log.log('Time changed to: ' + $scope.mytime);
};

$scope.clear = function() {
$scope.mytime = null;
};
});


But only "Time is :" is displayed.

Any idea ? Thanks in advance.

Answer

After checking the code you provided, I went to Plunker to test it. First thing I noticed was that you were not referencing the module in the ng-app.

ng-app="ui.bootstrap.demo"

The second thing was that the console was showing a module dependence error related to ui.bootstrap. I just added that dependency and everything was fine.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap.js"></script>

Please, check the full working example.