Angularjs: visualizza la data corrente


128

Ho avuto una visione in angularjs e sto solo cercando di visualizzare la data corrente (formattata). Ho pensato che qualcosa del genere <span>{{Date.now() | date:'yyyy-MM-dd'}}</span>dovesse visualizzare la data corrente.


Sarebbe .. ma non lo sa Date.now().
putvande,

2
Quindi devo prima generare la variabile nel controller? Ho pensato che qualcosa di semplice come la data corrente sarebbe stato più semplice :)
Evo_x

1
Date.now()è la funzione nodeJS
No

Risposte:


229

Devi prima creare un oggetto data nel tuo controller:

Controller:

function Ctrl($scope)
{
    $scope.date = new Date();
}

Visualizza:

<div ng-app ng-controller="Ctrl">
    {{date | date:'yyyy-MM-dd'}}
</div>

JS Esempio di violino

Filtro data angolare Rif


ciao @sloth Voglio usare cgi per visualizzare l'ora corrente del sistema. Come posso farlo? O è possibile? Grazie
bleyk,

44

Puoi anche farlo con un filtro se non vuoi collegare un oggetto data all'ambito corrente ogni volta che vuoi stampare la data:

.filter('currentdate',['$filter',  function($filter) {
    return function() {
        return $filter('date')(new Date(), 'yyyy-MM-dd');
    };
}])

e poi a tuo avviso:

<div ng-app="myApp">
    <div>{{'' | currentdate}}</div>
</div>

5
Potrebbe anche fare una direttiva allora
arg20

23

Modello

<span date-now="MM/dd/yyyy"></span>

Direttiva

.directive('dateNow', ['$filter', function($filter) {
  return {
    link: function( $scope, $element, $attrs) {
      $element.text($filter('date')(new Date(), $attrs.dateNow));
    }
  };
}])

Poiché non è possibile accedere direttamente Dateall'oggetto in un modello (per una soluzione in linea), ho optato per questa direttiva. Mantiene inoltre puliti i controller ed è riutilizzabile.


19

Bene, puoi farlo con l'espressione dei baffi ({{Date.now() | date:'dd.MM.yyyy HH:mm:ss'}} ). Devi solo assegnare l'oggetto Date all'ambito in cui vuoi valutare questa espressione.

Ecco un esempio di jsfiddle: jsfiddle jsfiddle

Ma non aspettarti che aggiorni automaticamente il valore. Questo valore non viene osservato da angolare, quindi è necessario attivare il digest ogni volta che si desidera aggiornarlo (ad esempio con un intervallo di $) ... che è uno spreco di risorse (e inoltre non "raccomandato" nei documenti). Ovviamente puoi usare la combinazione con direttive / controller per scherzare solo con l'ambito figlio (è sempre più piccolo rispetto ad esempio a rootScope e digest sarà più veloce).


9

Solo i miei 2 centesimi nel caso qualcuno si imbattesse in questo :)

Quello che sto suggerendo qui avrà lo stesso risultato della risposta corrente, tuttavia è stato raccomandato di scrivere il controller come ho menzionato qui.

Scorrimento di riferimento fino alla prima "Nota" (Scusa se non ha ancora)

Ecco il modo consigliato:

controller:

var app = angular.module('myApp', []);   
app.controller( 'MyCtrl', ['$scope', function($scope) {
    $scope.date = new Date();
}]);

Visualizza:

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    {{date | date:'yyyy-MM-dd'}}
  </div>
</div>

2

Puoi usare moment()eformat() funzioni in AngularJS.

controller:

var app = angular.module('demoApp', []);   
app.controller( 'demoCtrl', ['$scope', '$moment' function($scope , $moment) {
$scope.date = $moment().format('MM/DD/YYYY');
}]);

Visualizza:

<div ng-app="demoApp">
  <div ng-controller="demoCtrl">
    {{date}}
  </div>
</div>

2
<script type="text/javascript">
var app = angular.module('sampleapp', [])
app.controller('samplecontrol', function ($scope) {
   var today = new Date();
   console.log($scope.cdate);
   var date = today.getDate();
   var month = today.getMonth();
   var year = today.getFullYear();
   var current_date = date+'/'+month+'/'+year;
   console.log(current_date);
});
</script>


1

Visualizza

<div ng-app="myapp">
{{AssignedDate.now() | date:'yyyy-MM-dd HH:mm:ss'}}
</div>

controllore

var app = angular.module ('myapp', [])

app.run(function($rootScope){
    $rootScope.AssignedDate = Date;
})

1

Una soluzione simile a quella di @Nick G. usando il filtro, ma rende significativo il parametro:

Implementa un filtro chiamato relativedateche calcola la data relativa alla data corrente dal parametro dato come diff. Di conseguenza, (0 | relativedate)significa oggi e (1 | relativedate)significa domani.

.filter('relativedate', ['$filter', function ($filter) {
  return function (rel, format) {
    let date = new Date();
    date.setDate(date.getDate() + rel);
    return $filter('date')(date, format || 'yyyy-MM-dd')
  };
}]);

e il tuo html:

<div ng-app="myApp">
    <div>Yesterday: {{-1 | relativedate}}</div>
    <div>Today: {{0 | relativedate}}</div>
    <div>Tomorrow: {{1 | relativedate}}</div>
</div>

1

Un altro modo di fare è: In Controller, crea una variabile per contenere la data corrente come mostrato di seguito:

var eventsApp = angular.module("eventsApp", []);
eventsApp.controller("EventController", function EventController($scope) 
{

 $scope.myDate = Date.now();

});

Nella vista HTML,

<!DOCTYPE html>
<html ng-app="eventsApp">
<head>
    <meta charset="utf-8" />
   <title></title>
   <script src="lib/angular/angular.js"></script>
</head>
<body>
<div ng-controller="EventController">
<span>{{myDate | date : 'yyyy-MM-dd'}}</span>
</div>
</body>
</html>

@Billa, ho aggiornato il mio frammento di codice. Spero che ora sia più descrittivo.
Sunita,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.